CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Jackson
Jackson

Reputation: 58

Drag the clone of dropped elements in jQuery

I have tried to drag the dropped element which is a clone of the dragged element, but when I drag the element it create a another element in the page. Here is my code..

jQuery(function() {
    jQuery(".component").draggable({
        //  use a helper-clone that is append to 'body' so is not 'contained' by a pane
        helper:  function () { 
            return jQuery(this).clone().appendTo('body').css({'zIndex':5}); 
        },
        cursor: 'move'
    });

    jQuery('.ui-layout-center').droppable({
        activeClass: 'ui-state-hover',
        accept:  '.component',
        drop:  function(event, ui) {
            jQuery(this).append(jQuery(ui.draggable).clone().draggable()); 
        }
    });
});

Is there any missing command which makes every drag make a new clone?

Upvotes: 1

Views: 2719

Answers (2)

Iakov Mishchenko
Iakov Mishchenko

Reputation: 116

jQuery(this).append(jQuery(ui.draggable).clone().draggable()); Did you forget .clone()

Upvotes: 0

Samuel Caillerie
Samuel Caillerie

Reputation: 8275

You should had a class in order to indicate that element has been dropped and that you can move it but you should not clone it. You can have a look at this fiddle : http://jsfiddle.net/scaillerie/njYqA/ . In the handler for drop, I have just replace by this code :

if (!ui.draggable.hasClass("dropped"))
    jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());

Upvotes: 1

Related Questions