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

Question

我在以下方面遇到了一些困难，需要一些指导来了解如何（简单地）实现这一点。

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

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

我熟悉使用可拖动和可放置以及注册原始容器，但是在放置时，拖动的对象会从其原点移动。基本上，我希望实现这一点>>

1. 拥有一个无序列表的图像，这些图像都注册了可拖动。
2. 拥有一个注册为可放置的容器。
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，并且相同的 HTML 将被丢弃。所以原件即使在掉落后也能原封不动地留在原处。

 $( ".droppable" ).droppable({

   drop: function( event, ui ) {

       //Drop code
   }
});

我猜这解决了 3。

更新的代码：找到完整的小提琴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);
        }
    });