jQuery拖动;删除而不销毁拖动的项目

Question

我在以下方面遇到一些困难，需要一些指导才能实现（简单）。

使用jQuery，如何将一个对象拖入容器，为事件注册，并保留原始拖动的项目。

这很难解释，所以我能给出的最好的是一个有实例的网站：enter link description here

我熟悉使用draggable，droppable和注册原始容器，但是在拖放时，拖动的对象会从它的原点移动。基本上，我希望实现这个＆gt;＆gt;

1. 有一个无序的图像列表，这些图像都已注册为draggable。
2. 拥有一个注册为droppable的容器。
3. 将其中一个图像拖放到容器中，检测碰撞，然后删除+渲染一些html（出于演示目的，您可以显示如何对任何图像执行此操作，并且删除的结果可能是一个链接在页面上。
4. 在此过程中，不得从无序列表中移动图像。
5. 使用事件注册目标html（出于演示目的，我们可以捕获新插入的html的onclick事件。）

阻力＆amp;滴位是容易的部分。我遇到的困难分为三部分：

1. 放弃后将原始项目保留在原始位置。
2. 不要删除原始项目的副本 - 而是使用自定义html。
3. 设置已删除的代码以处理该代码块唯一的新事件。

提前致谢。

Answer 1

你可以做的事情

1＆amp; 2

$( ".selector" ).draggable( "option", "helper", function(){

//Custom HTML generator goes here;

} );

这将使用为拖动生成的自定义HTML，同样将被删除。因此，即使在掉落之后，原件也保持原样。

 $( ".droppable" ).droppable({

   drop: function( event, ui ) {

       //Drop code
   }
});

我想解决了这个问题。

更新后的代码：找到完整的小提琴here

  $('.dragger').draggable({
        revert: "invalid",
        helper: function () {
            //Code here
            return $("<div class='dragger'></div>").append("Hi");
        }
    });


    $(".dropper").droppable({
        drop: function (event, ui) {

            $(this)
                .addClass("ui-state-highlight")
                .find("p")
                .html("Dropped!");

            var element = $('.ui-draggable-dragging');
            var currentDrop=$(this);
            return element.clone().appendTo(currentDrop);
        }
    });