#3119 closed bug (worksforme)

Opened July 19, 2008 11:45PM UTC

Closed July 25, 2008 03:53PM UTC

A draggable object is offset by a few pixels on revert in firefox when jquery.dimensions is included.

Reported by: akshaychand Owned by: paul
Priority: major Milestone:
Component: ui.draggable Version: 1.5.1
Keywords: Draggable, Firefox, offset Cc:
Blocked by: Blocking:
Description

When I add jquery.dimensions.js to my HTML page, a draggable object gets offset by a few pixels (pushed down and right) on revert. This happens only in Firefox and not in IE. However, without the dimensions script I get the same error as noted in http://dev.jquery.com/ticket/2547. The problem with the offset on revert goes away when I remove dimensions.js from the page. Attached is a demo HTML page that demonstrates this problem.

It shows two images aligned in a grid view. If you drag one of the images and leave the mouse, the image reverts back to it's original position, except that it is offset by a few pixels. It is apparent because the two images are not aligned anymore

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <title>JQuery Drag Test</title>
   <head>
	<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
	<script type="text/javascript" src="js/ui.core.js"></script>
	<script type="text/javascript" src="js/jquery.dimensions.js"></script>
	<script type="text/javascript" src="js/ui.draggable.js"></script>
	<script type="text/javascript" src="js/ui.droppable.js"></script>	
	<script type="text/javascript">
 	  $(document).ready( function() {
		$('.draggable').each(function(i){
			//name all draggable objects drag_#
			$(this).attr('id', 'drag_' + i);
				
			//set all draggable objects 
			$(this).draggable({revert:true});
		});
	   });
	</script>
	<style rel="stylesheet" type="text/css">
		.thumbnail{				
			margin:10px;
			padding: 5px;
			height:80px;
			width:80px;
			float:left;
		}
	</style>
   </head>
   <body>	
      <div class="draggable"><img id="img1" class="thumbnail" src="images/samples/flowing-rock.jpg"/></div>
      <div class="draggable"><img id="img1" class="thumbnail" src="images/samples/flowing-rock.jpg"/></div>		
    </body>
</html>
Attachments (0)
Change History (1)

Changed July 25, 2008 03:53PM UTC by paul comment:1

resolution: → worksforme
status: new → closed

I tried your demo but could not reproduce the issue. Including jquery.dimensions is unsupported, because it's outdated. In what browser version did you test?