jquery 可拖动和可调整大小不能在动态生成的元素中协同工作

Question

编程新手，所以我仍然只是弄清楚它是如何工作的。我正在尝试执行以下操作：

创建一个新元素
将 class ("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

Answer 1

调用 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"}); 它将允许将 canvas 拖动到由可调整大小的插件添加的 div 中。

它将工作，将其更改为拖动包装后 div，而不是 canvas:

newCanvas.closest('div').draggable({containment: "parent"});

工作示例：http://jsfiddle.net/6pnuvg2k/1/

jquery 可拖动和可调整大小不能在动态生成的元素中协同工作

jquery draggable and resizable not working together in dynamically generated element

html

javascript

css

jquery

jquery-ui