#6994 closed bug (notabug)

Opened February 15, 2011 03:16PM UTC

Closed February 15, 2011 03:22PM UTC

Last modified February 15, 2011 03:50PM UTC

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>
Attachments (0)
Change History (4)

Changed February 15, 2011 03:22PM UTC by scottgonzalez comment:1

resolution: → invalid
status: new → closed

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

Changed February 15, 2011 03:29PM UTC by qor72 comment:2

Replying to [comment:1 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?

Changed February 15, 2011 03:50PM UTC by scottgonzalez comment:3

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

Changed February 15, 2011 03:50PM UTC by scottgonzalez comment:4

component: ui.core → ui.droppable