Drag&Drop and hover bug for wide scrollable element.

[vmishurov]

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.

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>

`

[mgol]

Thanks for the report. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer?

Also, can you upload the test case to a platform like JS Bin?

[vmishurov]

Thanks for the report. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer?

Also, can you upload the test case to a platform like JS Bin?

jQuery UI 1.12.1 same result
https://jsbin.com/ruzijosuga/edit?html,output

[mgol]

Thanks for the info & a test case. Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome if they're not too complex and contain tests.