jQuery UI sortable - overlapping by 50% doesn't seem to work

问题

jQuery UI sortable plugin is intended to enable a group of DOM elements to be sortable. A nice demo is at official website here

The API documentation provides tolerance option, and the description says:

Specifies which mode to use for testing whether the item being moved is hovering over another item. Possible values: intersect, pointer

Furthermore, the description of intersect (which is default) states:

intersect: The item overlaps the other item by at least 50%.

I expected, that if I drag one item, and move it over another item, it will detect that I'm reordering the items as soon as 50% of the height overlaps. But it doesn't seem to work this way :(. Even if you check the official demo, and you try to drag the 1st item over the 2nd item, you'll see that the 1st item has to be dragged for entire height, like 100% of its height, over the 2nd element, and only then the order of items is swapped.

Am I missing something? Is there any way for me as a programmer to force the plugin to work as I expect it to work? I wish the user to move the 1st item only 50% of its height down, in order for the plugin to detect overlapping and perform reordering.

回答1:

The short answer is:

There's a bug ticket for this, so it seems like the only option is some form of workaround.

Here's a workaround example that uses a custom sort function, which seemed to answer your question better. I'll keep the below example as well for another approach to the problem.

...

That covers the case with a single direction, but what if you want to implement a grid?

Here's a workaround fiddle that I edited (Grid example w/ insert): fiddle

Note: This doesn't swap blocks, it inserts them and pushes the rest back.

Here's a snip of the javascript / jQuery code involved that mocks 50% coverage:

var height = $(".tab").height();
var height = $(".tab").width();

    $('#pointer').sortable({
        cursorAt: { top: height/2, left: width/2 },
        containment: 'parent',
        tolerance: 'pointer'
    });

回答2:

Looking at the widget's code you'll find:

if (this.options.tolerance === "pointer" || this._intersectsWithSides(item)) {
                    this._rearrange(event, item);
                } else {
                    break;
                }

So, due you specifie tolerance: "intersect", this._intersectsWithSides(item) is take it.

And function _intersectsWithSides(item) it's defined here:

_intersectsWithSides: function(item) {
        var isOverBottomHalf = this._isOverAxis(this.positionAbs.top +
 this.offset.click.top, item.top + (item.height/2), item.height),
            isOverRightHalf = this._isOverAxis(this.positionAbs.left + 
this.offset.click.left, item.left + (item.width/2), item.width),
            verticalDirection = this._getDragVerticalDirection(),
            horizontalDirection = this._getDragHorizontalDirection();

it take "item.height/2" and "item.width/2"

You can go with your on function and redefine this behaviour:

_myIntersectsWithSides: function(item) {
        var isOverBottomHalf = this._isOverAxis(this.positionAbs.top +
 this.offset.click.top, item.top + (item.height/5), item.height),
            isOverRightHalf = this._isOverAxis(this.positionAbs.left + 
this.offset.click.left, item.left + (item.width/5), item.width),
            verticalDirection = this._getDragVerticalDirection(),
            horizontalDirection = this._getDragHorizontalDirection();

And that give you 20% (100/5 instead of 100/2) of width and height.

The "50%" it's defined by code.-

Hope this help

来源：https://stackoverflow.com/questions/31817876/jquery-ui-sortable-overlapping-by-50-doesnt-seem-to-work

标签

javascript

jquery

jquery-ui