javascript - jquery 可拖动和可调整大小不能在动态生成的元素中一起工作

Question

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

• 创建一个新元素
• 为新元素分配类(“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/