From 1f030a06435eea6b18c212dafe76daf8c9b7a9fe Mon Sep 17 00:00:00 2001 From: John Chen Date: Thu, 13 Sep 2012 15:48:26 +0800 Subject: [PATCH 1/5] [Layout View] Improve the sorting algorithm to solve jittering problem Direction is now determined only by the border the mouse is nearer --- src/js/jquery-workarounds.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/js/jquery-workarounds.js b/src/js/jquery-workarounds.js index a56196ec..9a46cd94 100644 --- a/src/js/jquery-workarounds.js +++ b/src/js/jquery-workarounds.js @@ -373,7 +373,7 @@ $.widget("ui.sortable", $.extend({}, $.ui.sortable.prototype, { _contactContainers: function(event) { // get innermost container that intersects with item - var innermostContainer = null, innermostIndex = null, direction, intersection; + var innermostContainer = null, innermostIndex = null; for (var i = this.containers.length - 1; i >= 0; i--){ @@ -384,8 +384,7 @@ $.widget("ui.sortable", $.extend({}, $.ui.sortable.prototype, { continue; - if(intersection = this._intersectsWithPointer(this.containers[i].containerCache)) { - direction = intersection == 1 ? "down" : "up"; + if(this._intersectsWithPointer(this.containers[i].containerCache)) { // if we've already found a container and it's more "inner" than this, then continue if(innermostContainer && $.ui.contains(this.containers[i].element[0], innermostContainer.element[0])) @@ -420,17 +419,15 @@ $.widget("ui.sortable", $.extend({}, $.ui.sortable.prototype, { for (var j = this.items.length - 1; j >= 0; j--) { if(!$.ui.contains(this.containers[innermostIndex].element[0], this.items[j].item[0])) continue; var cur = this.items[j][posProperty]; - if(Math.abs(cur - base) > Math.abs(cur + this.items[j][sizeProperty] - base)) + var nearBottom = false; + if(Math.abs(cur - base) > Math.abs(cur + this.items[j][sizeProperty] - base)) { cur += this.items[j][sizeProperty]; + nearBottom = true; + } if(Math.abs(cur - base) < dist) { dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j]; - if(!this._intersectsWithPointer(itemWithLeastDistance) && base != cur) - { - this.direction = base > cur ? "up": "down"; - } - else - this.direction = direction; + this.direction = nearBottom ? "up": "down"; } } From ebe691f74e087dd00ba792cfeaa9d3750e3864b7 Mon Sep 17 00:00:00 2001 From: John Chen Date: Tue, 25 Sep 2012 11:06:09 +0800 Subject: [PATCH 2/5] [Layout View] Fix the problem that lists can't be sorted --- src/js/composer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/composer.js b/src/js/composer.js index c029dc77..9495fdbe 100644 --- a/src/js/composer.js +++ b/src/js/composer.js @@ -527,7 +527,7 @@ $(function() { $(this).sortable('refresh'); $.each($(this).data('sortable').containers, function () { this.options.connectWith = '.ui-sortable-connected'; - this._refreshItems(); + this.refresh(); }); $(this).data('sortable')._refreshItems(); From 6c383afa0f0d90c010224eaf93d457e76588b0bd Mon Sep 17 00:00:00 2001 From: John Chen Date: Tue, 25 Sep 2012 11:06:09 +0800 Subject: [PATCH 3/5] [Layout View] Call refresh using more official way --- src/js/composer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/composer.js b/src/js/composer.js index 9495fdbe..b8c09844 100644 --- a/src/js/composer.js +++ b/src/js/composer.js @@ -529,7 +529,7 @@ $(function() { this.options.connectWith = '.ui-sortable-connected'; this.refresh(); }); - $(this).data('sortable')._refreshItems(); + $(this).sortable('refresh'); From 6293ce59d397dc4664f9a3095e2eafaec3c6da43 Mon Sep 17 00:00:00 2001 From: John Chen Date: Tue, 25 Sep 2012 11:10:50 +0800 Subject: [PATCH 4/5] [Layout View] Fix the problem that horizontal buttons can't be sorted jQuery UI's floating caculation overlooks the fact that items may come from other connected containers which may not be horizontal while this container is horizontal --- src/js/jquery-workarounds.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/js/jquery-workarounds.js b/src/js/jquery-workarounds.js index 9a46cd94..fe5dc828 100644 --- a/src/js/jquery-workarounds.js +++ b/src/js/jquery-workarounds.js @@ -413,11 +413,13 @@ $.widget("ui.sortable", $.extend({}, $.ui.sortable.prototype, { //When entering a new container, we will find the item with the least distance and append our item near it var dist = 10000; var itemWithLeastDistance = null; - var posProperty = this.containers[innermostIndex].floating ? 'left' : 'top'; - var sizeProperty = this.containers[innermostIndex].floating ? 'width' : 'height'; - var base = this.positionAbs[posProperty] + this.offset.click[posProperty]; + var floating = this.containers[innermostIndex].floating; for (var j = this.items.length - 1; j >= 0; j--) { if(!$.ui.contains(this.containers[innermostIndex].element[0], this.items[j].item[0])) continue; + floating = floating || (/left|right/).test(this.items[j].item.css('float')) || (/inline|table-cell/).test(this.items[j].item.css('display')); + var posProperty = floating ? 'left' : 'top'; + var sizeProperty = floating ? 'width' : 'height'; + var base = this.positionAbs[posProperty] + this.offset.click[posProperty]; var cur = this.items[j][posProperty]; var nearBottom = false; if(Math.abs(cur - base) > Math.abs(cur + this.items[j][sizeProperty] - base)) { From 92616622bb8510a4a0c71cdb9ad8c23591ff5e54 Mon Sep 17 00:00:00 2001 From: John Chen Date: Tue, 25 Sep 2012 11:15:29 +0800 Subject: [PATCH 5/5] [Layout View] Exclude currentItem from distance calculation --- src/js/jquery-workarounds.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/jquery-workarounds.js b/src/js/jquery-workarounds.js index fe5dc828..8df802e5 100644 --- a/src/js/jquery-workarounds.js +++ b/src/js/jquery-workarounds.js @@ -416,6 +416,7 @@ $.widget("ui.sortable", $.extend({}, $.ui.sortable.prototype, { var floating = this.containers[innermostIndex].floating; for (var j = this.items.length - 1; j >= 0; j--) { if(!$.ui.contains(this.containers[innermostIndex].element[0], this.items[j].item[0])) continue; + if(this.items[j].item[0] == this.currentItem[0]) continue; floating = floating || (/left|right/).test(this.items[j].item.css('float')) || (/inline|table-cell/).test(this.items[j].item.css('display')); var posProperty = floating ? 'left' : 'top'; var sizeProperty = floating ? 'width' : 'height';