CODEWITHSUNDEEP
jquery-uidrag-and-dropclone
hh54188
hh54188

Reputation: 15626

In jquery drop UI,how can I clone drag element into drop place with correct mouse position?

suppose I have a panel with draggable element,

and a droppable container,when I drag the element into container,

<div id="panel">
    <div class="square"></div>  
</div>
<div id="canvas"></div>

I want clone the draggable element,but the issue is ,the reltive position info could be copy,too

So how can I just let the clone one stay at the mouse stay position?,here is my code

$('.square').draggable({
        revert:"valid"
});
$('#canvas').droppable({
    drop: function (e, ui) {
        $(ui.draggable).clone().appendTo($(this));
    }
})

here is example http://jsfiddle.net/AN5gt/

Upvotes: 3

Views: 8136

Answers (2)

Akira Kronic
Akira Kronic

Reputation: 164

I would suggest to remove the revert to make the animation more realistic.

    $('.square').draggable({  
      helper:"clone"  
    });  

    $('#canvas').droppable({  
      drop: function(e, ui){  
        $(ui.draggable).clone().appendTo($(this));  
      }  
    })

Upvotes: 3

Aamir Mahmood
Aamir Mahmood

Reputation: 2724

Well, first I would like to thank you for asking this question, and it solved one of my own question.

I want to make link of physical file listed in a folder tree. ie for picture gallery, i am showing complete folder tree list, and want the admin to drag the image and put in the gallery.

Here what I have done.

$('.square').draggable({
    revert:"valid",
    helper:"clone"
});
$('#canvas').droppable({
    drop: function (e, ui) {
        $(ui.draggable).clone().appendTo($(this));
    }
})

Upvotes: 2

Related Questions