1

我正在使用 jQuery UI 将对象的克隆拖到可放置空间上。但是，我需要可放置空间来拥有该position: relative属性，因为可放置空间会滚动，并且我希望放置的元素随之滚动。但是，当我放下克隆时，它会向下并向右跳，而不是停留在我放下它的地方。我将如何与之抗争？

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

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

4

2 回答 2

3

试试这个

$(".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 中的元素都会不必要地添加父元素的偏移位置。所以您只需在 drop 回调函数中删除额外的偏移量。

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

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

于 2013-02-19T19:38:29.187 回答
0

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

替换这一行：

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

有了这个：

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

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

于 2013-02-19T18:35:51.323 回答