jquery拖放

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

    $(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"
            });
        }
    });
});

如果有人详细解释我，我会很高兴。请试着用小提琴给我举个例子。这对我很有帮助。谢谢

感谢您的快速响应，是的，这很好，当我拖动克隆时，它不起作用，我需要交换我放置到最近位置的克隆。正如您在下面提到的示例中所看到的，一旦将克隆放置到目标上，它就不可拖动

而网站链接是你可以看到我的意思，但在这个链接中，它只是附加，但我需要它被删除。。要捕捉到最近的路径，当我使用相同的图像放置时，它应该附着在现有路径的下方，而不是重叠

再次感谢您的回复

---

谢谢你的回复，我需要它完全一样，但发生的是，当我交换位置时，正如我之前所说，当我们第一次拖放到目标上时，它不会捕捉到最近的坐标，还有一件事是，它正在添加图像，尽管div部分的末端没有间隙，如果在目标上没有位置结束它应该检查顶部或底部是否有间隙，并且应该附加到图像中，否则它应该恢复。请检查。

我认为这是您想要的：

---

工作起来像个符咒：-），欢迎你

你想做什么？你有什么问题吗？我有点不确定你想做什么来到社区，请花点时间通读一下当你想回复某人时，你可以在他们的回答上留言。通常这需要更高的声誉，但既然你问了这个问题，你就可以回答任何人。不要编辑答案本身。Neal这似乎不起作用，在某些情况下，它会将block置于下方。@Marino什么似乎是保证使用-1的问题？如果将block拖放到列中的第一个块上，则将其从列中删除。不完全是这样，它工作不稳定。有时是有时不是：//马里诺，我不知道那是什么意思

$(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'
            });
        }
    });
});