Bug Tracker

Ticket #1553 (closed bug: wontfix)

Opened 7 years ago

Last modified 7 years ago

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:
Blocking: Blocked by:

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>

Change History

comment:1 Changed 7 years ago by pragueexpat

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.

comment:2 Changed 7 years ago by paul

  • Status changed from new to closed
  • Resolution set to wontfix

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.

Note: See TracTickets for help on using tickets.