javascript - jquery-ui draggable 在 appendchild() 之后不工作

Question

我正在开发一个具有 Canvas 和工具箱的网站。在工具箱中有一些按钮可以将所选工具添加到 Canvas (我这样做是因为我无法实现有效的拖放)。关键是，当我按下工具的按钮时，这个工具将作为一个 draggable 元素出现在 Canvas 中。但它简单不起作用，我可以使工具出现，但它保持固定(无法将其拖动到 Canvas 上)

我的按钮代码:

<button id="btn1" onclick="addToCanvas();"> 
  <img id="computer" src="images/myImage.png" width="40px;" height="40px;">
</button>

我的“addToCanvas()”javascript 函数

function addToCanvas(number){
var wrapper= document.createElement('div');
wrapper.innerHTML = '<div id="draggable" class="ui-widget-content"><img  src="images/myImage.png" width="60px;" height="60px;"></div>';
wrapper.setAttribute('id',"draggable");
wrapper.setAttribute('class',"ui-widget-content");
canvas.appendChild(wrapper);
}

你们知道它可能是什么吗？谢谢

Answer 1

您正在使用 draggable 的 id 创建它，但仅凭这一点并不能使其实际上可拖动。将对象添加到 DOM 后，您需要对该对象调用 jQuery 函数。

function addToCanvas(number){
   var wrapper= document.createElement('div');
   wrapper.innerHTML = '<div id="draggable" class="ui-widget-content"><img  src="images/myImage.png" width="60px;" height="60px;"></div>';

   // it appears to me these next two lines are redundant - you're already seeting their values in the innerHTML
   wrapper.setAttribute('id',"draggable");
   wrapper.setAttribute('class',"ui-widget-content");

   canvas.appendChild(wrapper);
   $('#draggable').draggable();   // <-- this is the missing piece
}

从 Draggable API 中找到 here .

另外，你混合了普通的 javascript 和 jQuery UI - 我会保持简单，一直使用 jQuery 并使我的函数看起来像这样:(我删除了数字参数，因为你没有使用它用于任何事情，甚至在点击事件中传递它)

function addToCanvas() {

   var $draggable = $('<div id="draggable" class="ui-widget-content"><img  src="images/myImage.png" width="60px;" height="60px;"></div>');
   canvas.append($draggable);
   $draggable.draggable();

}

示例 JSFiddle here .