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 ?
Share Improve this question edited Aug 30, 2015 at 15:47 tezkerek 1863 silver badges6 bronze badges asked May 24, 2015 at 10:10 SaifSaif 7,0528 gold badges42 silver badges62 bronze badges2 Answers
Reset to default 7There 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