Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Sortable: Calculating item distance and direction using a more robust al... #715

Closed
wants to merge 1 commit into from

2 participants

@zhizhangchen

...gorithm to better support sorting among embeded sortables

Use the item with lowest distance bettween the mouse pointer and
each of its borders to rearrange, the direction of which is
determined by the mouse postion relative to the item, with the
exception when the mouse pointer intersects with the item or
distance is zero, in which case mouse moving direction is used.
Also we use this algorithm to rearrange even when currentContainer
is not changed to override the defective rearranging in _mouseDrag

@scottgonzalez

Can you provide a demo that shows the improvement?

@zhizhangchen

Following are the problem examples and solutions provided by this PR:

Problem 1: http://jsfiddle.net/Zvvpt/15/
1. drag the first item and move slowly down, when getting to the bottom of the sortable, the placeholder moves to the top of the sortable
2. drag the second item and move slowly down, the placeholder doesn't move until the item is dragged out of the sortable, where the placeholder jumps quickly to the bottom of the sortable and then goes to the middle again

Solution: http://jsfiddle.net/kM4dR/2/

Problems 2: http://jsfiddle.net/6bsGx/3/
1. Click near the bottom of an item and move downwards, notice that the item can't be dragged out of the inner sortable
2. Click near the top of an item and move upward, notice that the item can't be dragged out of the inner sortable
Solution: http://jsfiddle.net/6bsGx/6/

Problems 3: http://jsfiddle.net/k4nn3/3/
1. drag an item down, notice that it's hard to put the item between the two inner sortables. If you clicked the top of an item and drag it down , it can be put between the inner sortables, but you can never make it there when moving upwards.
Solution: http://jsfiddle.net/k4nn3/5/

@zhizhangchen zhizhangchen Sortable: Calculating item distance and direction using a more robust…
… algorithm to better support sorting among nested sortables

Use the item which has the least distance bettween the mouse
pointer and one of its borders to rearrange, with direction being
determined by the nearest border.
Also we use this algorithm to rearrange even when currentContainer
is not changed to override the defective rearrangment in
_mouseDrag
a4b33bd
@scottgonzalez

Thanks, landed in bae06d2.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 12, 2012
  1. @zhizhangchen

    Sortable: Calculating item distance and direction using a more robust…

    zhizhangchen authored
    … algorithm to better support sorting among nested sortables
    
    Use the item which has the least distance bettween the mouse
    pointer and one of its borders to rearrange, with direction being
    determined by the nearest border.
    Also we use this algorithm to rearrange even when currentContainer
    is not changed to override the defective rearrangment in
    _mouseDrag
This page is out of date. Refresh to see the latest.
Showing with 14 additions and 4 deletions.
  1. +14 −4 ui/jquery.ui.sortable.js
View
18 ui/jquery.ui.sortable.js
@@ -735,16 +735,26 @@ $.widget("ui.sortable", $.ui.mouse, {
if(this.containers.length === 1) {
this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
this.containers[innermostIndex].containerCache.over = 1;
- } else if(this.currentContainer != this.containers[innermostIndex]) {
+ } else {
//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 base = this.positionAbs[this.containers[innermostIndex].floating ? 'left' : 'top'];
+ 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];
for (var j = this.items.length - 1; j >= 0; j--) {
if(!$.contains(this.containers[innermostIndex].element[0], this.items[j].item[0])) continue;
- var cur = this.containers[innermostIndex].floating ? this.items[j].item.offset().left : this.items[j].item.offset().top;
+ if(this.items[j].item[0] == this.currentItem[0]) continue;
+ var cur = this.items[j].item.offset()[posProperty];
+ var nearBottom = false;
+ if(Math.abs(cur - base) > Math.abs(cur + this.items[j][sizeProperty] - base)){
+ nearBottom = true;
+ cur += this.items[j][sizeProperty];
+ }
+
if(Math.abs(cur - base) < dist) {
dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j];
- this.direction = (cur - base > 0) ? 'down' : 'up';
+ this.direction = nearBottom ? "up": "down";
}
}
Something went wrong with that request. Please try again.