如何使用 gridstack 使动态创建的元素可拖动？
[英]How to make dynamically created elements draggable with gridstack?
问题描述
在我的项目中，我使用了这个名为gridstack 的拖放库。 您可以在此处查看他们在 github 上的文档。 当您对 dom 内的元素进行硬编码并初始化 gridstack 时，这些元素是可拖动的。 但是当使用 forloop 动态创建元素时，即使它们具有适当的可拖动类，它们也不是可拖动的。 我怎样才能使这项工作？
//initialize grid stack var grid = GridStack.init({ minRow: 5, // don't collapse when empty cellHeight: 70, acceptWidgets: true,// acceptWidgets - accept widgets dragged from other grids or from outside (default: false). dragIn: '.newWidget', // class that can be dragged from outside dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper:'clone' }, // clone or can be your function removable: '#trash', // drag-out delete class }); //gridstack on change grid.on('added removed change', function(e, items) { let str = ''; items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; }); console.log(e.type + ' ' + items.length + ' items:' + str ); }); //dynamic elemenets const arr = ["Bruh cant drag me!", "Nope me neither", "Me too mouhahaha"]; //loop for (let i = 0; i < arr.length; i++) { var div = document.createElement('div'); var el = "<div class='newWidget grid-stack-item ui-draggable ui-resizable ui-resizable-autohide'> <div class='grid-stack-item-content' style='padding: 5px;'> "+arr[i]+"</div></div>"; div.innerHTML = el; $('.dynamic').append(div); }
.grid-stack-item-removing { opacity: 0.8; filter: blur(5px); } #trash { background: rgba(255, 0, 0, 0.4); padding: 5px; text-align: center; } .grid-stack-item{ background: whitesmoke; width: 50%; border: 1px dashed grey; } .grid-stack { background : #F0FFC0; }
<!-- jquery --> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- gridstack--> <link rel="stylesheet" href="https://gridstackjs.com/node_modules/gridstack/dist/gridstack-extra.min.css"/> <script src="https://gridstackjs.com/node_modules/gridstack/dist/gridstack-h5.js"></script> <!-- body--> <body> <div id="trash"><span>drop here to remove</span> </div> <br> <div class="dynamic"></div> <div class="newWidget grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> <div class="grid-stack-item-content" style="padding: 5px;"> <div> </div> <div> <span>I'm original domster! Drag and drop me!</span> </div> </div> </div> <br> <div class="grid-stack"></div> </body>
1 个解决方案
解决方案1
0 2021-10-20 17:19:06
这个问题是在这里提出的。 网格不会自动跟踪外部变化，因此需要为dragIn选项重新初始化网格以注意新的动态小部件
GridStack.setupDragIn()
完整代码
//initialize grid stack var grid = GridStack.init({ minRow: 5, // don't collapse when empty cellHeight: 70, acceptWidgets: true,// acceptWidgets - accept widgets dragged from other grids or from outside (default: false). dragIn: '.newWidget', // class that can be dragged from outside dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper:'clone' }, // clone or can be your function removable: '#trash', // drag-out delete class }); //gridstack on change grid.on('added removed change', function(e, items) { let str = ''; items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; }); console.log(e.type + ' ' + items.length + ' items:' + str ); }); //dynamic elemenets const arr = ["Bruh cant drag me!", "Nope me neither", "Me too mouhahaha"]; //loop for (let i = 0; i < arr.length; i++) { var div = document.createElement('div'); var el = "<div class='newWidget grid-stack-item ui-draggable ui-resizable ui-resizable-autohide'> <div class='grid-stack-item-content' style='padding: 5px;'> "+arr[i]+"</div></div>"; div.innerHTML = el; $('.dynamic').append(div); } GridStack.setupDragIn( '.newWidget', );
.grid-stack-item-removing { opacity: 0.8; filter: blur(5px); } #trash { background: rgba(255, 0, 0, 0.4); padding: 5px; text-align: center; } .grid-stack-item{ background: whitesmoke; width: 50%; border: 1px dashed grey; } .grid-stack { background : #F0FFC0; }
<!-- jquery --> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- gridstack--> <link rel="stylesheet" href="https://gridstackjs.com/node_modules/gridstack/dist/gridstack-extra.min.css"/> <script src="https://gridstackjs.com/node_modules/gridstack/dist/gridstack-h5.js"></script> <!-- body--> <body> <div id="trash"><span>drop here to remove</span> </div> <br> <div class="dynamic"></div> <div class="newWidget grid-stack-item ui-draggable ui-resizable ui-resizable-autohide"> <div class="grid-stack-item-content" style="padding: 5px;"> <div> </div> <div> <span>I'm original domster! Drag and drop me!</span> </div> </div> </div> <br> <div class="grid-stack"></div> </body>
jQuery Stackable在动态创建的可拖动元素上不起作用
[英]jQuery stackable not working on dynamically created draggable elements
jQuery UI Draggable：获取大量动态创建元素的拖动偏移量
[英]jQuery UI Draggable: Get drag offset of A LOT of dynamically created elements
如何使用 jquery 使事件监听动态创建的 html 元素？
[英]how to make events listen to dynamically created html elements using jquery?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.