jQuery拖放而不破坏拖动的项目

我对以下内容有些困难，需要一些指导才能实现（简单）。

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

这很难解释，所以我能给出的最好的是一个有工作示例的网站： 在这里输入链接描述

我熟悉使用draggable，droppable和注册原始容器，但是在drop上，拖动的对象从它的原点移动。 基本上，我希望实现这一目标>>

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

拖放位是容易的部分。 我遇到的困难分为三部分：

1. 掉落后将原始物品保留在原始位置。
2. 不要删除原始项目的克隆 – 而是使用自定义html。
3. 设置已删除的代码以处理该代码块特有的新事件。

提前致谢。

Answer 1

你可以做的事情

1和2

$( ".selector" ).draggable( "option", "helper", function(){ //Custom HTML generator goes here; } ); 

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

  $( ".droppable" ).droppable({ drop: function( event, ui ) { //Drop code } }); 

我猜这解决了3。

更新代码：在这里找到完整的小提琴

  $('.dragger').draggable({ revert: "invalid", helper: function () { //Code here return $("
").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); } });