Javascript appendchild（）后Jquery ui Dragable无法工作

我正在开发一个有画布和工具箱的网站。在工具箱中，有一些按钮可以添加到所选工具的画布中（我这样做是因为我无法实现工作拖放）。关键是，当我按下该工具的按钮时，该工具将在画布中显示为可拖动的

元素。但它简单不起作用，我可以使工具出现，但它保持不变（无法在画布上拖动它）

我的按钮代码：

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



“addToCanvas（）的javascript函数”

函数addToCanvas（编号）{
var wrapper=document.createElement（'div'）；
wrapper.innerHTML=''；
setAttribute（'id'，'draggable'）；
setAttribute（'class'，“ui小部件内容”）；
canvas.appendChild（包装器）；
}

你们知道会是什么吗？谢谢
您正在创建一个id为
draggable
的文件，但仅此一点并不意味着它实际上是可拖动的。将对象添加到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
}

函数addToCanvas（编号）{
var wrapper=document.createElement（'div'）；
wrapper.innerHTML=''；
//在我看来，接下来的两行是多余的——您已经在innerHTML中看到了它们的值
setAttribute（'id'，'draggable'）；
setAttribute（'class'，“ui小部件内容”）；
canvas.appendChild（包装器）；
$（“#draggable”）.draggable（）；//试着把它放在小提琴里，它会鼓励人们帮助你嘿，Danny，谢谢你的回答。不幸的是，没有一个解决方案有效。：/我的脚本文件已经有了$（“#draggable”）.draggable（）；建议的第二个解决方案没有将工具添加到画布中（图像不会出现）：/I遗漏了包装$（）关于$draggable中的html-很抱歉。现在修复了它。添加了一个fiddle来演示。Danny第二个解决方案给了我一个错误：canvas.append不是一个函数。您从未说过was
canvas
was，但由于您使用的是jQueryUI，所以我假设它是jQuery元素，就像在我的fiddle中一样。对不起，我的错了，我是前端de的新手开发。我的画布是：我试着像你一样把id放在屏幕上，但我仍然得到了错误。我看到你拉小提琴，这正是我想要做的。你的小提琴很好！
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
}

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();

}