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，并且相同的内容将被删除。因此，即使跌落后，原件也能完好无损地留在原处。

 $( ".droppable" ).droppable({

   drop: function( event, ui ) {

       //Drop code
   }
});

我猜这解决了 3 个问题。

更新代码:找到完整的 fiddle 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);
        }
    });