jQuery Drag&掉落而不会破坏被拖动的物品

问题描述

我在以下方面遇到了一些困难，需要一些指导(如何)(简单).

I am having some difficulty with the following and need a bit of guidance in how this can be achieved (simply).

使用jQuery，我如何将一个对象拖到一个容器中，为事件注册它，然后将原始拖动的项目保留在原处.

Using jQuery, how can I drag one object into a container, register it for events, and leave the original dragged item in place.

这很难解释，因此，我能提供的最好的例子是一个带有示例的网站:输入此处的链接描述

This is very difficult to explain, so the best I can give is a site with a working example: enter link description here

我熟悉使用可拖动和可拖放的方式，并注册了一个原始容器，但是在拖放时，被拖动的对象是从其原点移动的.基本上，我希望做到这一点>>

I am familiar with using draggable, and droppable, and registering an original container, however on drop, the dragged object is moved from it's origin. Basically, I wish to achieve this >>

1. 具有无序排列的图像列表，这些图像均已通过可拖动方式注册.
2. 具有一个已注册为可放置的容器.
3. 在将其中一幅图像拖放到容器上时，检测碰撞，并拖放一些html(出于演示目的，您可以显示如何对任何图像执行此操作，并且所释放的结果可能是一个链接在页面上.
4. 在此过程中，不得将图像从无序列表中移出.
5. 使用事件注册目标html(出于演示目的，我们可以捕获新插入的html的onclick事件).

拖动和下降位是容易的部分.我遇到的困难分为三个部分:

The drag & drop bit is the easy part. The difficulty I am having is in 3 parts :

1. 放置后，将原始项目保留在其原始位置.
2. 请勿删除原始项目的副本，而应使用自定义html.
3. 设置放置的代码以处理该代码块特有的新事件.

谢谢.

推荐答案

您可以做的事情

1& 2

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

//Custom HTML generator goes here;

} );

这将使用生成的自定义HTML进行拖动，并且将其删除.因此，即使掉落后，原件也能保持原样.

This will use the custom HTML generated for dragging and the same will be dropped. So the original stays intact in its place even after drop.

 $( ".droppable" ).droppable({

   drop: function( event, ui ) {

       //Drop code
   }
});

我想这可以解决3个问题.

That solves 3 I guess.

更新的代码:在 此处

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

这篇关于jQuery Drag&掉落而不会破坏被拖动的物品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！