jquery拖放

Question

我想知道如何使用以下代码克隆元素并将其附加到可放置区域：

    $(function() {
    $(".draggable").draggable();
    $(".item").droppable({
        drop: function(event, ui) {
            var $this = $(this);
            $this.append(ui.draggable);    

            var width = $this.width();
            var height = $this.height();
            var cntrLeft = width / 2 - ui.draggable.width() / 2;
            var cntrTop = height / 2 - ui.draggable.height() / 2;

            ui.draggable.css({
                left: cntrLeft + "px",
                top: cntrTop + "px"
            });
        }
    });
});

如果有人详细解释我，我会很高兴。请尝试在 Fiddle 中给我一个例子。它对我有很大帮助。谢谢。

感谢您的快速回复，是的，它很好，当我拖动克隆时它不起作用，我需要交换克隆到最近的位置。正如您在下面提到的示例中看到的那样放在目标上时不可拖动。

http://jsfiddle.net/kiran/brCX5/31/embedded/result/

网站链接是http://www.vitsoe.com/en/re/shop/606/sketchtool，您可以在其中看到我的意思，但在此链接中它只是附加的，但我需要将其丢弃，即.. 捕捉到最近的路径，当我丢弃相同的路径时图片应附在现有图片的下方，且不得重叠。

再次感谢您的回复。

感谢您的回复，我需要它完全相同，但发生的情况是，当我按照我之前所说的那样交换位置时，​​它不会捕捉到最近的坐标，因为我们首先拖放目标和一个更重要的是它正在添加图像，尽管 div 部分的末尾没有间隙，如果最后没有位置，它应该检查顶部或底部是否有间隙，它应该附加到图像否则它应该会恢复，请检查一下。

Answer 1

我想这就是你想要的： http://jsfiddle.net/maniator/brCX5/33/

$(function() {
    $(".draggable").draggable({
        helper: 'clone',
        snap: '.ui-droppable',
        snapMode: 'outer'
    });

    $(".droppable").droppable({
        accept: '.draggable',
        drop: function(event, ui) {
            var clone = $(ui.draggable).clone();
            $(this).append(clone);
            clone.removeClass('draggable')
            clone.draggable({
                snap: '.ui-droppable',
                snapMode: 'outer'
            });
        }
    });
});

像魅力一样工作 :-)，欢迎您