Ticket #6259 (open bug)
Droppable: drop event incorrectly triggered when dragging a draggable over a droppable onto a sortable
| Reported by: | avuori | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 2.0.0 |
| Component: | ui.droppable | Version: | 1.8.6 |
| Keywords: | Cc: | avuori | |
| Blocking: | Blocked by: |
Description
When a draggable is connected with a sortable, and there is also a droppable involved, the droppable's drop event is erroneously triggered when the draggable is dragged quickly over the droppable (without ever releasing the mouse).
The example demonstrates the problem. It may not be reproducible instantly, but a few down/up drag movements should do it. An alert is shown when the droppable event is triggered.
The problem seems to be present only when the draggeble's helper is "clone".
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js"></script>
</head>
<body>
<script>
$(function() {
$("tbody.sortable").sortable({});
$(".draggable").draggable({
helper: "clone",
connectToSortable: "tbody.sortable"
});
$(".droppable")
.droppable({drop: function () { alert("dropped"); } });
$("td").disableSelection();
});
</script>
<table>
<tbody>
<tr class="draggable ui-state-highlight"><td>Drag me down above the sortable,
then quickly drag me up directly over and past the droppable</td></tr>
<tr class="droppable ui-state-highlight"><td>Droppable</td></tr>
</tbody>
<tbody class="sortable">
<tr class="ui-state-default"><td>Item 1</td></tr>
<tr class="ui-state-default"><td>Item 2</td></tr>
<tr class="ui-state-default"><td>Item 3</td></tr>
<tr class="ui-state-default"><td>Item 4</td></tr>
<tr class="ui-state-default"><td>Item 5</td></tr>
</tbody>
</table>
</body>
</html>
Attachments
-
example.html
(1.1 KB) -
added by avuori 3 years ago.
Change History
comment:2 Changed 2 years ago by be.davestein
I had the same issue on my site with very different markup. Was also using clone.
comment:3 follow-up: ↓ 4 Changed 2 years ago by cnr
$(".droppable") .droppable({drop: function () {
if (!$(event.srcElement).hasClass("ui-draggable-dragging")) { return; }
alert("dropped");
} });
will be solve your problem
comment:4 in reply to: ↑ 3 Changed 2 years ago by avuori
Replying to cnr:
$(".droppable") .droppable({drop: function () {
if (!$(event.srcElement).hasClass("ui-draggable-dragging")) { return; }
alert("dropped");
} });
will be solve your problem
Thanks for the tip!
comment:6 Changed 7 months ago by mikesherov
- Status changed from new to open
- Summary changed from Droppable's drop event triggered when dragging a draggable over the droppable to Droppable: drop event incorrectly triggered when dragging a draggable over a droppable onto a sortable
confirmed on latest: http://jsfiddle.net/2aJh9/