jQuery Drag & Drop without Destroying dragged item

Question

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

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 >>

Have an unordered list of images that are all registered with draggable.
Have a container that is registered as droppable.
On drag&drop action of one of the images to the container, detect collision, and drop+render some html (for demonstration purposes, you can show how to do this with any image, and the dropped result could be an link on the page.
During this process, the image must not be moved from the unordered list.
Register the target html with events (for demonstration purposes, we can capture the onclick event for the newly inserted html ).

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

Keep the original item in it's original location after drop.
Do not drop a clone of the original item -- use custom html instead.
Setup the dropped code to handle new events that are unique to that block of code.

Thanks in advance.

Aneesh Mohan Aneesh Mohan · Accepted Answer · 2014-10-09T04:36:51

Things you can do

1 & 2

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

//Custom HTML generator goes here;

} );

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
   }
});

That solves 3 I guess.

UPDATED CODE: Find the complete 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);
        }
    });

jQuery Drag & Drop without Destroying dragged item

1 Answers