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

jquery draggable and resizable not working together in dynamically generated element

本文关键字：元素 不能 工作 一起 draggable resizable 动态 jquery      更新时间：2024-03-29

编程新手，所以我仍在弄清楚事情是如何工作的。我正在尝试以下操作：

  • 创建新元素
  • 为新元素分配类（"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/

相关文章：