JQuery UI draggable destroy, then draggable again not works

Question

I use the jquery ui draggable, droppable plugins. I wrote this code:

$(".droppable").draggable({
  containment:"window",
  appendTo:$("#canvas"),
  helper:"clone",
  scroll:false
});

$("#canvas").droppable({
  accept:".droppable",
  drop:function(event,ui){
    ui.draggable.draggable("destroy");
    ui.draggable.draggable({
      containment:"window",
      appendTo:$("#canvas"),
      helper:"clone",
      scroll:false
    });
  }
});

but it doesn't work, the draggable object is not draggable anymore after I dropped it on the dropzone. If I write this in jsfiddle (http://fiddle.jshell.net/te4sjtcz/), everything is OK, the draggable object is still draggable after the draggable("destroy").

If I use console.log(ui.draggable.draggable("instance")), it produces:

Before destroy: <div.... etc.
After destroy: undefined
After reattach draggable: <div.... etc

Other info is that if I use ui.draggable.draggable("option","key","value") format for setup, everything is fine again. Why I can't use the simple .draggable({}) format in my code and why does it work in jsfiddle? (I use the same library)

Update 1: I see that the destory removes these classes: ui-draggable ui-draggable-handle, and after reattach I don't see them.

Update 2: If I put the reattach block into a setTimeout(HERE,0), it works. But it's not a good workaround... because I don't know why it solved the problem.

score 0 · Answer 1 · answered Mar 30 '15 at 13:07

Your code works with jquery-ui 1.9.2 (your jsFiddle project) and doesn't work with jquery-ui 1.11.3 version (your code snippet project). The difference is in the draggable destroy method. Starting with 1.11.0 version the _destroy function just sets the destroyOnClear flag to true and returns, so the actual "destroy" occurs after exiting the droppable drop function.

So if it is absolutely necessary to create the same draggable in the drop function again setTimeout will be useful.

JQuery UI draggable destroy, then draggable again not works

1 Answers1