Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

[Layout View] Improve the sorting algorithm to solve jittering problem #297

Open
wants to merge 5 commits into from

2 participants

@zhizhangchen

Direction is now determined only by the border the mouse is nearer

@sbryan
Owner

With this change, I can no longer move a button to the first position in a horizontal (inline) layout container, such as a footer.

Test case:

  1. Add a footer to a page
  2. Add a button to the footer 3, Rename the button "Button 1" (to help track the buttons) 4, Add a 2nd button to the footer 5, Rename the 2nd button "Button 2" (to help track the buttons) 6, Repeat steps 4 and 5 as many times as you like (2 is enough)
  3. Begin dragging "button 2"
  4. Attempt to place it in front of "Button 1"

I am unable to make this work at all anymore.

Same is true for horizontal button groups

Also, it seems that list items in a list can no longer be sorted either... not sure if it is related, but I can see the behavior difference between the 01.org/rib/online version and master

Please go back and retest more thoroughly and fix or note regressions.

@zhizhangchen

I fixed all the bugs you mentioned. Please review. Thanks!

zhizhangchen added some commits
@zhizhangchen zhizhangchen [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
6293ce5
@zhizhangchen zhizhangchen [Layout View] Exclude currentItem from distance calculation 9261662
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 24, 2012
  1. @zhizhangchen

    [Layout View] Improve the sorting algorithm to solve jittering problem

    zhizhangchen authored
    Direction is now determined only by the border the mouse is nearer
Commits on Sep 25, 2012
  1. @zhizhangchen
  2. @zhizhangchen
  3. @zhizhangchen

    [Layout View] Fix the problem that horizontal buttons can't be sorted

    zhizhangchen authored
    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
  4. @zhizhangchen
This page is out of date. Refresh to see the latest.
Showing with 15 additions and 15 deletions.
  1. +2 −2 src/js/composer.js
  2. +13 −13 src/js/jquery-workarounds.js
View
4 src/js/composer.js
@@ -527,9 +527,9 @@ $(function() {
$(this).sortable('refresh');
$.each($(this).data('sortable').containers, function () {
this.options.connectWith = '.ui-sortable-connected';
- this._refreshItems();
+ this.refresh();
});
- $(this).data('sortable')._refreshItems();
+ $(this).sortable('refresh');
View
26 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]))
@@ -414,23 +413,24 @@ $.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;
+ 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';
+ var base = this.positionAbs[posProperty] + this.offset.click[posProperty];
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";
}
}
Something went wrong with that request. Please try again.