Skip to main content

Search and Top Navigation

#7415 closed bug (fixed)

Opened May 23, 2011 08:15PM UTC

Closed March 13, 2013 03:32PM UTC

Last modified March 13, 2013 03:33PM UTC

Sortable: Incorrect revert animation with axis: "y"

Reported by: pk_745 Owned by:
Priority: minor Milestone: 1.10.2
Component: ui.sortable Version: 1.8.13
Keywords: Cc:
Blocked by: Blocking:
Description

Sortable bounces back in IE8,Chrome and Safari with revert true option.

IE version: 8.0.6001.18702C0

Chrome: 10.0.648.151

Safari: 5.0.4(7533.20.27)

Firefox(4.0) works perfectly.

Bug description:

<ul>

<li><img src="1.jpg" /></li>

<li><img src="2.jpg" /></li>

<li><img src="3.jpg" /></li>

</ul>

Try following jQuery code:

var options = {};

options.axis = "y";

options.containment = "parent";

options.cursor = "crosshair";

options.tolerance = "pointer";

options.revert = "true";

$('ul').sortable(options);

CSS: ul {list-style:none;}

  • In IE8,Chrome and Safari this code doesn't work properly. While sorting, image bounces back and then realign(sort) to proper place.Code is very simple, developer can try by just copy and paste.
Attachments (0)
Change History (6)

Changed September 21, 2012 01:28PM UTC by tfs comment:1

A very annoying bug with a very simple fix. I'm not using GitHub, so here's patch if anyone is interested:

Index: ui/jquery.ui.sortable.js
===================================================================
--- ui/jquery.ui.sortable.js	(revision )
+++ ui/jquery.ui.sortable.js	(working copy)
@@ -285,10 +285,16 @@
 		//Regenerate the absolute position used for position checks
 		this.positionAbs = this._convertPositionTo("absolute");
 
-		//Set the helper position
-		if(!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position.left+'px';
-		if(!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top+'px';
+		//Set the helper position, use original position as defaults
+		var left = this.originalPosition.left+'px';
+		var top = this.originalPosition.top+'px';
 
+		if(!this.options.axis || this.options.axis != "y") left = this.position.left+'px';
+		if(!this.options.axis || this.options.axis != "x") top = this.position.top+'px';
+		
+		this.helper[0].style.left = left;
+		this.helper[0].style.top = top;
+
 		//Rearrange
 		for (var i = this.items.length - 1; i >= 0; i--) {

Changed October 11, 2012 02:55PM UTC by scottgonzalez comment:2

milestone: 1.9.02.0.0

Changed November 08, 2012 08:52PM UTC by mikesherov comment:3

status: newopen
summary: sortable bounces back in IE8,Chrome and Safari with revert true optionSortable: bounces back in IE8,Chrome and Safari with revert true option

confirmed on latest in chrome: http://jsfiddle.net/KNDJY/

Changed March 13, 2013 01:44AM UTC by tj.vantoll comment:4

summary: Sortable: bounces back in IE8,Chrome and Safari with revert true optionSortable: Incorrect revert animation with axis: "y"

The only options that matter are

axis: "y"
&
revert: true
http://jsfiddle.net/tj_vantoll/fKTST/.

This occurs in the latest version of Chrome, Safari, and Opera as well as IE 7 - 10. Very interestingly it does not occur in Firefox.

Changed March 13, 2013 03:32PM UTC by Scott González comment:5

resolution: → fixed
status: openclosed

Sortable: Only animate along the specified axis when reverting. Fixes #7415 - Sortable: Incorrect revert animation with axis: 'y'.

Changeset: 054449e214449ec5578fe71bb67b9a670adac828

Changed March 13, 2013 03:33PM UTC by scottgonzalez comment:6

milestone: 2.0.01.10.2