jquery / jquery/jquery-ui

Drag&Drop and hover bug for wide scrollable element.

Open
#2,346 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Behavior shared with 1.12 Comp: Draggable Comp: Droppable
Dominant language
JavaScript
Stars
11.3k
Forks
5.2k
PR merge metrics
No merged PRs in 30d

Description

  1. Create a wide element and place it in a horizontally scrolling container.
  2. Place two such containers in a row.
  3. Start dragging the element from right to left.
  4. And when the cursor is still on the right container, you can see that the element in the left container is selected as the target for placement. Which the cursor has not even reached yet!
  5. If you drag row 1 of the right container and release the button on row 2 of the right container in its left half, you will get two drop events. Where the event.target is the second row of each container.

Image

Reproduction code:
`
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>

<style>
    .ui-droppable-active {
        background: lightblue;
    }
    .ui-droppable-hover {
        background: lightgreen;
    }
</style>

<div style="display: flex; width:800px">
    <div style="border: 2px solid black; width: 50%; overflow-x: scroll">
        <div class="draggable" style="width:600px;" >
                11111111111111111111
        </div>
        <div class="draggable" style="width:600px;" >
                11111111111111111111
        </div>
    </div>
    <div style="border: 2px solid black; width: 50%; overflow-x: scroll">
        <div class="draggable" style="width:600px;" >
                11111111111111111111
        </div>
        <div class="draggable" style="width:600px;" >
                11111111111111111111
        </div>
    </div>
</div>

<script>
    $(function () {
        $('.draggable').draggable({
            helper: function (e) { return '<div style="width: 20px; height:20px; background:red"></div>'; },
            cursorAt: { left: 10, top: 10 }
    }); 
    $('.draggable').droppable({drop:function(event,ui) { console.log ('drop', event.target); } });
    });
</script>
`

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Run the supplied HTML reproduction with jquery-ui.js and observe the draggable and droppable interactions across the two horizontally scrolling containers. Start by tracing the drag and drop behavior shown by the reproduction; done means hovering the right container does not select the left container and releasing on one row produces only the expected drop event.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, jquery
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.