[bug] fallback dragging issue - cursor interacts with underlying content

clint-ms commented 3 years ago

Describe the bug

When dragging item with forceFallback: true option, cursor interacts with underlying items (triggers native tooltips, adopts style, triggers onMouseXxx events, etc.):

sortable_pointer_issue

To Reproduce Steps to reproduce the behavior:

Use Sortable with forceFallback: true
Grab sortable item and drag it over some interactive item (e.g. hyperlink, element with title, etc.)
See error

Expected behavior

Cursor does not interact with any content under the dragged item (.sortable-fallback)

Information

Versions: sortablejs = current (https://sortablejs.github.io/Sortable/Sortable.js, 1.14.0 ATM) @types/sortablejs = n/a

Additional context

Tested on the latest Chrome, Firefox and Safari (MacOS)

Reproduction

<html>
<head>
    <title>Sortable - fallback pointer-events issue</title>
    <style>
        body {
            width: 70%;
            margin: 1em auto;
            text-align: center;
        }
        ul {
            padding: 0;
            list-style: none;
        }
        li {
            background-color: white;
            border: 1px solid darkgray;
            padding: 0.5em 1em;
            margin-bottom: 1em;
            cursor: grab;
        }
        .sortable-ghost {
            background-color: lightgrey;
            color: lightgrey;
        }
        .sortable-fallback {
            background-color: papayawhip;
            cursor: grabbing;
        }
    </style>
    <script src="https://sortablejs.github.io/Sortable/Sortable.js"></script>
    <script>
        function init() {
            const el = document.getElementById('items');

            Sortable.create(el, {
                forceFallback: true,
            });
        }
    </script>
</head>
<body onload="init()">
    <h1>SortableJS/Sortable</h1>
    <h2>fallback pointer-events issue</h2>
    <ul id="items">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
    <p>
        <a title="Sortable link tooltip" href="https://sortablejs.github.io/Sortable">Sortable</a>
    </p>
</body>
</html>

sundongzi commented 3 years ago

+1 Same problem here for Chrome

yuujitaka commented 2 years ago

+1 same problem

papuche commented 6 months ago

Still an issue :/

SortableJS / Sortable

[bug] fallback dragging issue - cursor interacts with underlying content #2069