Drag&Drop and hover bug for wide scrollable element.
Open
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
- Create a wide element and place it in a horizontally scrolling container.
- Place two such containers in a row.
- Start dragging the element from right to left.
- 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!
- 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.
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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