JQuery UI可拖动销毁，然后再次可拖动不起作用答案

【问题标题】：JQuery UI draggable destroy, then draggable again not worksJQuery UI可拖动销毁，然后再次可拖动不起作用
【发布时间】：2015-03-18 14:02:50
【问题描述】：

我使用 jquery ui 可拖动、可放置的插件。我写了这段代码：

$(".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
    });
  }
});

但它不起作用，可拖动对象在我将其放在放置区域后不再可拖动。如果我在jsfiddle（http://fiddle.jshell.net/te4sjtcz/）中写这个，一切正常，可拖动对象在draggable（“destroy”）之后仍然是可拖动的。

如果我使用 console.log(ui.draggable.draggable("instance"))，它会产生：

销毁前：<div.... etc.
销毁后：未定义
重新附加后可拖动：<div.... etc

其他信息是，如果我使用 ui.draggable.draggable("option","key","value") 格式进行设置，一切都会再次正常。为什么我不能在我的代码中使用简单的 .draggable({}) 格式，为什么它可以在 jsfiddle 中工作？（我用的是同一个库）

更新 1：我看到 destory 删除了这些类：ui-draggable ui-draggable-handle，重新附加后我看不到它们。

更新 2：如果我将重新附加块放入 setTimeout(HERE,0)，它可以工作。但这不是一个好的解决方法...因为我不知道它为什么解决了这个问题。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-draggable

【解决方案1】：

您的代码适用于 jquery-ui 1.9.2（您的 jsFiddle 项目），不适用于 jquery-ui 1.11.3 版本（您的代码 sn-p 项目）。不同之处在于可拖动的销毁方法。从1.11.0版本the _destroy function just sets the destroyOnClear flag to true and returns开始，所以真正的“销毁”发生在退出droppable drop函数之后。

因此，如果绝对有必要在 drop 函数中再次创建相同的可拖动对象，setTimeout 将很有用。

【讨论】：