Opened 12 years ago

Closed 11 years ago

Last modified 10 years ago

#1547 closed bug (fixed)

drop callback function runs twice in jQueryUI

Reported by: pragueexpat Owned by: rdworth
Priority: major Milestone:
Component: ui.core Version: 1.1.3
Keywords: drop callback twice Cc:
Blocked by: Blocking:

Description

I have one draggable div and one droppable div. Each is nested in its own absolutely positioned parent div (see file source below). The droppable div has a callback function. The problem is that the callback is running twice. If the droppable div is not nested in the parent the callback runs correctly (once). If the parent is not absolutely positioned, the callback also runs correctly. The problem occurs in IE, Firefox and Opera (no others tested). Greedy parameter makes no difference. draggable.js, droppable.js and mouse.js were downloaded from svn on August 28, 2007.

HTML file: (Firebug console.log will output div id each time callback runs)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script type="text/javascript" src="/lib/jquery/jquery-1.1.3.1.js"></script>
		<script type="text/javascript" src="/lib/jqueryui/ui.mouse.js"></script>
		<script type="text/javascript" src="/lib/jqueryui/ui.draggable.js"></script>
		<script type="text/javascript" src="/lib/jqueryui/ui.droppable.js"></script>
		<script type="text/javascript" src="/lib/jquerydimensions/jquery.dimensions.js"></script>
		<style type="text/css">
			#textInput1_container{
				border:1px solid blue;
				position:absolute;
				top:25px;
				left:500px;
				z-Index:100
			}
			#textInput2_container{
				border:1px solid blue;
				position:absolute;
				top:25px;
				left:50px;
				z-Index:100				
			}
			.dd{
				height:30px;
				width:30px;
				border:1px dashed red;
			}
		</style>
	</head>
<body>
	<div id="textInput1_container" class="dragdiv">
		Enter text: <input type="text" id="textInput1" name="textInput1" size="40" />
		<div id="drag_textInput1" class="dd drag">Drag</div>
	</div>
	<div id="textInput2_container" class="dragdiv">
		Enter text: <input type="text" id="textInput2" name="textInput2" size="40" />
		<div id="drop_textInput2" class="dd drop">Drop</div>
	</div>

<script type="text/javascript">

$(function(){
	$('.dragdiv').draggable();
	$('.drop').each(function(){createDropTarget($(this))});
	$('.drag').each(function(){createDragTarget($(this))});
});

createDropTarget = function(jObj){
	(jObj).droppable({accept:'.drag',tolerance:'intersect',greedy:true,drop:function(a,b){console.log(this.id)}});
}

createDragTarget = function(jObj){
	(jObj).draggable({helper:'clone'});
}

</script>
</body>
</html>

Change History (6)

comment:1 Changed 12 years ago by paul

Owner: changed from paul to rworth

comment:2 Changed 12 years ago by rdworth

It seems one of the drops is coming from the element, and the other from the cursor. If you drop the draggable but the cursor is not over the droppable, only one drop is called.

comment:3 in reply to:  description Changed 11 years ago by nadia

I'm having exactly the same problem. I hope a fix is soon to come. Thanks

comment:4 Changed 11 years ago by bstar

I had the same problem. It seems that a second call is made via the mouseup event.
As a quick fix I added this code to the drop function of the file ui.droppable.js: (after line line 126, release 1.0)

  if ( e.type!="dragstop" ) return;  // don't handle events called via mouseup. TEMP FIX

comment:5 Changed 11 years ago by rdworth

Resolution: fixed
Status: newclosed

Fixed in rev4063

comment:6 Changed 10 years ago by m-matze

It seems the bug is still alive. I'm using version 1.53 of ui and can reproduce rdworth research. Thanks for helping!

Note: See TracTickets for help on using tickets.