Question

我正在使用jQuery UI将对象的克隆拖动到可放置空间。但是，我需要droppable空间具有position: relative属性，因为可放置的空间会滚动，我希望被删除的元素随之滚动。然而，当我放下克隆时，它会向下跳到右边而不是停留在我丢弃的地方。我该如何对抗这个？

这是一个演示我的问题的小提琴：http://jsfiddle.net/nEN7h/42/

编辑：根据我的评论更新。

Answer 1

试试这个

$(".canvas").droppable({
    accept: '.to_drag',
    drop: function(event, ui) {
        var clone = $(ui.helper).clone();
        var parent = $('.canvas.ui-droppable');

        $(this).append(clone);
        var leftAdjust = clone.position().left - parent.offset().left;
        var topAdjust = clone.position().top - parent.offset().top;
        clone.css({left: leftAdjust, top: topAdjust});

    }
});

基本上这个想法是当你将droppable包含在一个相对的div里面时。包含在droppable中的任何元素都会获得不必要地添加到它的父项的偏移位置..所以你只需删除掉落中的额外偏移量回功能。

请密切注意.offset()和.position()之间的差异，这是理解上述代码的关键。

注意：我尝试使用jsfiddle ..但是jsfiddle有点摆弄定位..在你的浏览器上单独尝试它应该可以工作

Answer 2

这是一个解决方案，但我不确定，如果是这样，你正在寻找什么。

替换此行：

$(this).append($(ui.helper).clone());

这一个：

$('<div class="to_drag"></div>').appendTo(this);

如果您不使用ui.helper，它可以正常工作。

jQuery UI：放入相对定位的容器中

2 个答案: