Question

我正在开发一个有画布和工具箱的网站。在工具箱中有一些按钮可以将所选工具添加到画布上（我这样做是因为我无法实现拖放工作）。关键在于，当我按下工具按钮时，此工具将在画布中显示为draggable元素。但它简单无法工作，我可以使工具出现，但它保持固定（无法在画布上拖动它）

我的按钮代码：

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

我的javascript函数＆＃34; addToCanvas（）＆＃34;

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，让我的功能看起来像这样:(我删除了数字参数，因为你不是＆＃39;使用它做任何事情，甚至在点击事件中传递它）

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。

在appendchild（）之后，Jquery-ui可拖动不工作

1 个答案: