Bug Tracker

#1553 closed bug (wontfix)

Opened August 30, 2007 12:06PM UTC

Closed August 30, 2007 02:00PM UTC

Error in offset position when dragging element more than once

Reported by: pragueexpat Owned by: paul
Priority: undecided Milestone:
Component: ui Version: 1.1.3
Keywords: Cc:
Blocked by: Blocking:
Description

I have a draggable (helper = clone) div that can be dragged to one of several droppable divs. The start function of the drag records the start position of the draggable div using offset(). The first drag records the position correctly. The second is not correct. The third is correct, the fourth is not correct, etc. The incorrect positions are all reported as the same value (its off by 14 pixels to the right)

ui.mouse.js, ui.draggable.js, ui.droppable.js are from new jQueryUI August 28,2007

contact:pragueexpat <at> hotmail.com

Explanation of sample code:

Open this file in Firefox (it uses the console.log of firebug). Drag the red dot to any of the green dots. The console will log the starting position of the red dot div when you start the drag. Notice that every even numbered time you drag the red dot, the position is incorrect.

<!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">
			.container{
				border:1px solid blue;
				position:absolute;
				z-Index:100;
				width:300px;
				height:60px;			
			}
			#textInput1_container{
				top:25px;
				left:500px;
			}
			#textInput2_container{
				top:25px;
				left:50px;
			}
			#textInput3_container{
				top:100px;
				left:50px;
			}
			#textInput4_container{
				top:175px;
				left:50px;
			}
			#textInput5_container{
				top:250px;
				left:50px;
			}
			#textInput6_container{
				top:100px;
				left:500px;
			}
			#textInput7_container{
				top:175px;
				left:500px;
			}
			.dd{
				display:inline;
				border:1px solid green
			}
		</style>
	</head>
<body>
	<div id="textInput1_container" class="container">
		Enter text: <input type="text" id="textInput1" name="textInput1" size="40" />
		<div id="drag_textInput1" class="dd drag">
		<img src="/images/dragzone.jpg" />
		</div>
	</div>
	<div id="textInput2_container" class="container">
		Enter text: <input type="text" id="textInput2" name="textInput2" size="40" />
		<div id="drop_textInput2" class="dd drop">
		<img src="/images/dropzone.jpg" />
		</div>
	</div>
	<div id="textInput3_container" class="container">
		Enter text: <input type="text" id="textInput3" name="textInput3" size="40" />
		<div id="drop_textInput3" class="dd drop">
		<img src="/images/dropzone.jpg" />
		</div>
	</div>
	<div id="textInput4_container" class="container">
		Enter text: <input type="text" id="textInput4" name="textInput4" size="40" />
		<div id="drop_textInput4" class="dd drop">
		<img src="/images/dropzone.jpg" />
		</div>
	</div>
	<div id="textInput5_container" class="container">
		Enter text: <input type="text" id="textInput5" name="textInput5" size="40" />
		<div id="drop_textInput5" class="dd drop">
		<img src="/images/dropzone.jpg" />
		</div>
	</div>
	<div id="textInput6_container" class="container">
		Enter text: <input type="text" id="textInput6" name="textInput6" size="40" />
		<div id="drop_textInput6" class="dd drop">
		<img src="/images/dropzone.jpg" />
		</div>
	</div>
	<div id="textInput7_container" class="container">
		Enter text: <input type="text" id="textInput7" name="textInput7" size="40" />
		<div id="drop_textInput7" class="dd drop">
		<img src="/images/dropzone.jpg" />
		</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});
}

createDragTarget = function(jObj){
	(jObj).draggable({helper:'clone',start:function(){
		var tmp = $('#'+this.id).offset();
		console.log(tmp);
	}});
}

</script>
</body>
</html>
Attachments (0)
Change History (2)

Changed August 30, 2007 12:46PM UTC by pragueexpat comment:1

Sorry, just realized that the images 'dragzone.jpg' and 'dropzone.jpg' are not attached. The first div is the draggable and the rest are droppable.

Changed August 30, 2007 02:00PM UTC by paul comment:2

resolution: → wontfix
status: new → closed

The cloning of the helper also clones the id of the original because of css reasons. Therefore, this is not a bug, but it reports from time to time the helper position. Please use $(this) for a real reference to the original to avoid this.