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

}）;

这里的小提琴：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"});时它将允许拖动由可调整大小的插件添加的div内的canvas。

在将其更改为拖动包装div后，它将起作用，而不是canvas：

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

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

jquery draggable和resizable不能在动态生成的元素中一起工作

1 个答案: