Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#6994 closed bug (notabug)

Draggable revert doesn't (re)trigger Droppable Drop

Reported by: qor72 Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.droppable Version: 1.8.9
Keywords: Cc:
Blocked by: Blocking:

Description

I have a simple page with a draggable, two droppables, and a div containing them. The draggable has revert: 'invalid' set. Drag the draggable onto the droppable, and the highlight comes on. Drag it out, and onto the other droppable, and the highlight is correctly removed.

Drag & drop the draggable onto the first droppable, triggering highlighting. Now, drag it off of both droppables. When revert is triggered, the draggable is moved back onto the droppable, but no drop is triggered.

Example Code to use to reproduce:

<html>
<head><title>jQueryUI Draggable/Droppable bug</title>
 	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css" media="all" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<style type="text/css">
body { background-color: White; }
.draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; cursor: move; position: absolute; }
.vidavaildrop { float: left; margin: 10px; padding: 0.5em; }
.vidusedrop { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
#containment { width: 100%; height: 200px; border: 2px solid $ccc; padding: 10px; }
</style>
</head>
<body>
<script language="javascript">
$(document).ready(function () {
$(".draggable").draggable({ containment: "#containment", revert: 'invalid' });
$(".vidusedrop").droppable({ drop: function(event, ui) { $(this).addClass("ui-state-highlight") },
							  out: function(event, ui) { $(this).removeClass("ui-state-highlight"); }
						 });
$(".vidavaildrop").droppable({});
});
</script>

<div id="containment" style="position: absolute;">
	<div id="used" class="vidusedrop ui-widget-header">
		<p>
			drop zone</p>
	</div>
	<div id="unused" class="vidavaildrop" style="position: relative; background-color: Gray;
		width: 500px; height: 150px;">
	</div>
	<div id="drag1" class="draggable ui-widget-content">
		<img src="http://localhost/img/flash_thumbs/TheTaxRelief.gif" alt="alt" />
	</div>
</div>

</body>
</html>

Change History (4)

comment:1 Changed 9 years ago by Scott González

Resolution: invalid
Status: newclosed

This is working as intended. The user did not drop the draggable on the original droppable again.

comment:2 in reply to:  1 Changed 9 years ago by qor72

Replying to scott.gonzalez:

This is working as intended. The user did not drop the draggable on the original droppable again.

True. However, the user made an error, their error was reverted, and the state of the page was not returned to what it was. Shouldn't revert, revert?

comment:3 Changed 9 years ago by Scott González

It does revert, triggering a drop event wouldn't not be reverting, it would be taking a new action.

comment:4 Changed 9 years ago by Scott González

Component: ui.coreui.droppable
Note: See TracTickets for help on using tickets.