Question

根据我的理解，Draggable UI的帮助选项只是here描述的显示效果。

但是当它与表一起使用时，它似乎被窃听（追加位置是错误的）。

$(".no_clone_item").draggable({
    revert: 'invalid'
});

$(".clone_item").draggable({
    helper: 'clone',
    revert: 'invalid'
});

$("td").droppable({
    drop: function (event, ui) {
        $(ui.draggable).appendTo(this);
    }
});

任何人都可以解释这种行为或提供解决方法/解决方法吗？

感谢。

Answer 1

Tim建议的解决方案有效但我在应用程序中实现时失去了一些功能。

相反，我保留了帮助程序克隆，只是在拖动时隐藏了原始文件，并在拖动停止时重新显示它。

draggable({
    start: function(event, ui) {
        $(this).hide();
    },
    stop: function(event, ui) {
        $(this).show();

    }
});

Answer 2

我认为最简单的方法是在.drop()上使用CSS重置定位。

ui.draggable.css({ left: 0, top: 0 }).appendTo(this);

这至少可以解决你的问题。

注意：ui.draggable - 当前可拖动元素， jQuery对象。

DEMO ：http://jsfiddle.net/tive/mJkd5/

jQuery UI将css属性top和left添加到拖动元素的原因仅用于视觉反馈。您可以通过添加以下CSS在您的解决方案中对此进行测试：

td img.no_clone_item {
    left: auto !important;
    top: auto !important;
}

启用此CSS后，您将无法获得视觉反馈。只有在掉落时，物品才会在视觉上移动。

当.draggable()收到克隆元素时，该位置会添加到克隆元素中以进行视觉反馈。

使用Draggable UI辅助克隆和非克隆的两种不同行为，发生了什么？

2 个答案: