将可拖动到可排序连接会导致帮助元素跳转 [英] Connecting a Draggable to Sortable causes helper element to jump

问题描述

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

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

将元素从draggable拖动到sortable会导致拖动元素跳转

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/

要复制：

• 将draggable div（顶盒）拖动到可排序div（底部框）

实际结果：

• 项目5在拖动可排序时跳转到左上角 - http://i.stack.imgur.com/474OP.jpg

• Item 5 jumps to top left corner when dragged over the sortable - 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选项未设置为克隆。如果您使用克隆助手，则跳转问题将消失。

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可拖动帮助程序选项帮助。这个想法是在创建帮助者时将位置从相对转换为绝对值。

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.

以下是使用clone帮助器工作演示的链接： a href =http://jsfiddle.net/travisrussi/aBhDu/ =nofollow noreferrer> http://jsfiddle.net/travisrussi/aBhDu/

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

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