将 Draggable 连接到 Sortable 会导致辅助元素跳转 [英] Connecting a Draggable to Sortable causes helper element to jump

问题描述

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

I have a jQueryUI draggable object and a sortable object on the page.

将一个元素从可拖动元素拖到可排序元素会导致被拖动的元素跳到页面的左上角.

Dragging an element from the draggable to the sortable causes the dragged element to jump up to the top left of the page.

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

复制:

• 将项目 5"从可拖动的 div(顶部框)拖到可排序的 div(底部框)

实际结果:

• 当拖动到可排序对象上时，第 5 项跳转到左上角 - http://i.stack.imgur.com/474OP.jpg

拖动的元素似乎从相对定位切换到绝对定位.拖拽的li"切换自:

It appears the dragged element switches from relative to absolute positioning. The dragged 'li' switches from:

<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>

当可拖动项被拖入可排序对象时.

when the draggable item is dragged into the sortable object.

这是来自 jQueryUI 1.8.12 的相关 片段(从第 3041 行开始):

This is the relevant snippet from jQueryUI 1.8.12 (starts at line 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;

<小时>

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

---

Is there some configuration option I'm not using?

CSS 有问题吗?

或者这是 jqueryUI 中的错误?

Or is this a bug in jqueryUI?

推荐答案

跳转的主要原因是draggable的'helper'选项没有设置为'clone'.如果您使用克隆助手，跳跃问题就会消失.

The primary cause of the jump was that the 'helper' option of the draggable was not set to 'clone'. If you use a clone helper, the jumping problem goes away.

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

If you need to use the 'original' helper setting, you will still have the jumping issue. One possible solution for it could be to use a custom helper option, as highlighted here: jQueryUI Draggable Helper Option Help. The idea would be to convert the position from relative to absolute at the time the helper is created.

这里是使用克隆"助手的工作演示的链接:http://jsfiddle.net/travisrussi/aBhDu/

Here's a link to the working demo using a 'clone' helper: http://jsfiddle.net/travisrussi/aBhDu/

这篇关于将 Draggable 连接到 Sortable 会导致辅助元素跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！