编程新手,所以我仍在弄清楚事情是如何工作的。我正在尝试以下操作:
- 创建新元素
- 为新元素分配类("docbox")和动态生成的id
- 使元素可拖动并可调整大小
- 将其添加到DOM
问题:除了draggable()和resizable()之外,其他一切都正常。在我尝试添加可调整大小之前,可拖动一直有效。我试着改变它的调用方式和代码中的调用位置,查看了很多SO问题、jQuery来源等。没有得到它。
这是代码:
$(document).ready(function(){
var button = $("#documents_box");
var wrapper = $("#wrapper");
var counter = 0;
button.click(function () {
var newCanvas = $('<canvas>');
var boxNumber = counter;
counter++;
newCanvas.draggable({containment: "parent"});
//newCanvas.resizable({handles: "all"});
newCanvas.addClass("docbox");
newCanvas.attr("id", boxNumber);
newCanvas.click(function () {
var newClass = this.className;
var newID = this.id;
alert(newClass+newID);
});
wrapper.append(newCanvas);
});
});
和Fiddle在这里:http://jsfiddle.net/y4steqe2/18/
非常感谢任何能解释我做错了什么的人p
调用newCanvas.resizable
会在newCanvas节点周围添加包装div,因此HTML将如下所示:
<div class="ui-wrapper" style="overflow: hidden; ...">
<canvas class="docbox ui-resizable" id="0" style="..."></canvas>
<!-- UI HANDLES CODE -->
</div>
当您呼叫newCanvas.draggable({containment: "parent"});
时它将允许在可调整大小的插件添加的div中拖动CCD_ 3。
在您将其更改为拖动包装div(而不是画布)后,它将起作用:
newCanvas.closest('div').draggable({containment: "parent"});
工作示例:http://jsfiddle.net/6pnuvg2k/1/