jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了使用jquery-sortable无法将大项目拖动到最顶层/最底层大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
将大型项目拖动到最顶层或最底层位置时会出现问题.

演示:http://jsfiddle.net/vladimir_ze/b2Q9b/17/

在排序之前(在开始事件上)我减少元素大小以使大型元素的排序变得容易,但似乎计算仍然使用元素原始高度(在我将其设置为较小的大小之前).

任何想法如何解决

更新

我最近在搜索是否可以在启动事件之前更改元素高度时遇到了一个有趣的链接(jQuery UI : Before start draggable),并且事实证明可以使用beforeStart事件扩展sortable.

var oldMouseStart = $.ui.sortable.prototype._mouseStart;
$.ui.sortable.prototype._mouseStart = function (event,overrideHandle,noActivation) {
    this._trigger('beforeStart',event,this._uiHash());
    oldMouseStart.apply(this,[event,noActivation]);
};

当beforeStart触发时,我应用类来最小化该项,并调用.sortable(‘refresh’).

结果如下:http://jsfiddle.net/vladimir_ze/b2Q9b/18/
它仍然有点马车但如果你从顶部边缘开始拖动它会很好.

解决方法

这似乎是jquery中的一个错误,已经是 logged了.

修复版本将在1.12版本中提供.
同时,您可以按照this link.Working fiddle中的建议将以下@L_674_17@添加到您的脚本中.

$.widget("ui.sortable",$.extend({},$.ui.sortable.prototype,{
_mouseDrag: function(event) {
    var i,item,itemElement,intersection,o = this.options,scrolled = false,touchingEdge;

    //Compute the Helpers position
    this.position = this._generatePosition(event);
    this.positionAbs = this._convertPositionTo("absolute");

    if (!this.lastPositionAbs) {
        this.lastPositionAbs = this.positionAbs;
    }

    //Do scrolling
    if(this.options.scroll) {
        if(this.scrollParent[0] !== document && this.scrollParent[0].tagName !== "HTML") {

            if((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) {
                this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop + o.scrollSpeed;
            } else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity) {
                this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed;
            }

            if((this.overflowOffset.left + this.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity) {
                this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft + o.scrollSpeed;
            } else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity) {
                this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft - o.scrollSpeed;
            }

        } else {

            if(event.pageY - $(document).scrollTop() < o.scrollSensitivity) {
                scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);
            } else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity) {
                scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);
            }

            if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity) {
                scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);
            } else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity) {
                scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);
            }

        }

        if(scrolled !== false && $.ui.ddmanager && !o.dropBehavIoUr) {
            $.ui.ddmanager.prepareOffsets(this,event);
        }
    }

    //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";
    }

    // check if the Helper is touching the edges of the containment.
    if(this.containment) {
        if((this.positionAbs.left === this.containment[0] || this.options.axis === "y") &&
                (this.positionAbs.top === this.containment[1] || this.options.axis === "x")) {
            touchingEdge = 0;
            this.direction = "down";
        }
        else if((this.positionAbs.left === this.containment[2] || this.options.axis === "y") &&
                (this.positionAbs.top === this.containment[3] || this.options.axis === "x")) {
            touchingEdge = this.items.length - 1;
            this.direction = "up";
        }
    }

    if(touchingEdge !== undefined && this.Helper[0] !== this.items[touchingEdge].item[0]) {
        // Rearrange,if the Helper is touching the edge of the containment and not
        // already the item at the edge.
        this._rearrange(event,this.items[touchingEdge],falsE);
        this._trigger("change",this._uiHash());
    } else {
        //Rearrange
        for (i = this.items.length - 1; i >= 0; i--) {

            //Cache variables and intersection,conTinue if no intersection
            item = this.items[i];
            itemElement = item.item[0];
            intersection = this._intersectsWithPointer(item);
            if (!intersection) {
                conTinue;
            }

            // Only put the placeholder inside the current Container,skip all
            // items from other containers. This works because when moving
            // an item from one container to another the
            // currentContainer is switched before the placeholder is moved.
            //
            // Without this,moving items in "sub-sortables" can cause
            // the placeholder to jitter beetween the outer and inner container.
            if (item.instance !== this.currentContainer) {
                conTinue;
            }

            // cAnnot intersect with itself
            // no uSELEss actions that have been done before
            // no action if the item moved is the parent of the item checked
            if (itemElement !== this.currentItem[0] &&
                this.placeholder[intersection === 1 ? "next" : "prev"]()[0] !== itemElement &&
                !$.contains(this.placeholder[0],itemElement) &&
                (this.options.type === "semi-dynamic" ? !$.contains(this.element[0],itemElement) : truE)
            ) {
                this.direction = intersection === 1 ? "down" : "up";

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

                this._trigger("change",this._uiHash());
                break;
            }
        }
    }

    //Post events to containers
    this._contactContainers(event);

    //Interconnect with droppables
    if($.ui.ddmanager) {
        $.ui.ddmanager.drag(this,event);
    }

    //Call callBACks
    this._trigger("sort",this._uiHash());

    this.lastPositionAbs = this.positionAbs;
    return false;

}
}));

大佬总结

以上是大佬教程为你收集整理的使用jquery-sortable无法将大项目拖动到最顶层/最底层全部内容,希望文章能够帮你解决使用jquery-sortable无法将大项目拖动到最顶层/最底层所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。