Sortable
Sortable copied to clipboard
Published
20 hours ago •
SortableJS
SortableJS
[bug] fallback dragging issue - cursor interacts with underlying content
Describe the bug
When dragging item with forceFallback: true option, cursor interacts with underlying items (triggers native tooltips, adopts style, triggers onMouseXxx events, etc.):
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>
