将 Draggable 连接到 Sortable 会导致辅助元素跳转

Question

我在页面上有一个 jQueryUI 可拖动对象和一个可排序对象。

将元素从可拖动元素拖动到可排序元素会导致拖动的元素跳至页面左上角。

这是演示： http://jsfiddle.net/travisrussi/aBhDu/1/

重现：

• 将“Item 5”从可拖动div（顶部框）拖动到可排序div（底部框）

实际结果：

• 当拖动到可排序上方时，项目5跳转到左上角 - https://i.sstatic.net/474OP.jpg

---

看起来拖动的元素从相对定位切换到绝对定位。 拖动的“li”从： 切换为

<li class="ui-state-default ui-draggable" style="position: relative; left: 52px; top: 9px;">Item 3</li>

： 。

<li class="ui-state-default ui-draggable ui-sortable-helper" style="position: absolute; left: 67px; top: 91px; width: 80px; height: 20px;">Item 3</li>

当可拖动项目被拖动到可排序对象中时，

---

这是 jQueryUI 1.8.12 的相关片段（从第 3041 行开始）：

//The element's absolute position on the page minus margins
this.offset = this.currentItem.offset();
this.offset = {
    top: this.offset.top - this.margins.top,
    left: this.offset.left - this.margins.left
};

// Only after we got the offset, we can change the helper's position to absolute
// TODO: Still need to figure out a way to make relative sorting possible
this.helper.css("position", "absolute");
this.cssPosition = this.helper.css("position");

$.extend(this.offset, {
    click: { //Where the click happened, relative to the element
        left: event.pageX - this.offset.left,
        top: event.pageY - this.offset.top
    },
    parent: this._getParentOffset(),
    relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper
});

//Generate the original position
this.originalPosition = this._generatePosition(event);
this.originalPageX = event.pageX;
this.originalPageY = event.pageY;

---

是否有一些我没有使用的配置选项？

CSS有问题吗？

或者这是 jqueryUI 中的一个错误？

Answer 1

跳转的主要原因是可拖动对象的“助手”选项未设置为“克隆”。如果您使用克隆助手，跳跃问题就会消失。

如果您需要使用“原始”辅助设置，您仍然会遇到跳跃问题。一种可能的解决方案是使用自定义帮助器选项，如下所示：jQueryUI Draggable Helper Option Help。这个想法是在创建助手时将相对位置转换为绝对位置。

以下是使用“克隆”助手的工作演示的链接： http://jsfiddle.net/travisrussi/aBhDu /

Answer 2

似乎自定义辅助函数解决了这个问题，如下所示：

        $( ".draggable" ).draggable({
            connectToSortable: "#sortable",
            //helper: "original",
            revert: "invalid",
            helper: function() {
                return $(this);
            }
        });