javascript - Jquery UI Draggable clone disappearing - Stack Overflow

admin管理员组

文章数量:1314496

I am trying to use the jquery-ui draggable to make some element draggable. I set the helper option to clone the current element.
It's making the clone correctly but when I drop the clone disappears. It doesn't stay at the dragged place.

See this for Demo Fiddle Link

$('#drag').draggable({
helper: function (e, ui) {
    return $(this).clone();
}
});

What am I missing ?

I am trying to use the jquery-ui draggable to make some element draggable. I set the helper option to clone the current element.
It's making the clone correctly but when I drop the clone disappears. It doesn't stay at the dragged place.

See this for Demo Fiddle Link

$('#drag').draggable({
helper: function (e, ui) {
    return $(this).clone();
}
});

What am I missing ?

• javascript
• jquery
• jquery-ui
• jquery-ui-draggable
• jquery-draggable

Share Improve this question Follow edited Aug 30, 2015 at 15:47 tezkerek 18633 silver badges66 bronze badges asked May 24, 2015 at 10:10 SaifSaif 7,05288 gold badges4242 silver badges6262 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

There maybe a simpler way, but through data of draggable, you can target a property that deals with this. Like this:

stop : function(e, ui){
         $('#drag').draggable().data()["ui-draggable"].cancelHelperRemoval = true;
    }

fiddle: http://jsfiddle/n10ucrLd/

I think there's been a lot of troubles with helper: 'clone'. I always got it to work, when I defined a droppable as well. E.g.:

HTML:

<div id="drag">Drag This</div>
<div class="container"></div>

JavScript:

$('#drag').draggable({
helper: function (e, ui) {
    return $(this).clone(true);
}
});

 $( ".container" ).droppable({
    drop: function (event, ui) {
       ui.draggable.clone().appendTo($(this)).draggable();
    }
 });

Live example: http://jsbin./vibeqaganu/1/edit?html,css,js,output

本文标签： javascriptJquery UI Draggable clone disappearingStack Overflow