Open
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>