如何使用 gridstack 使动态创建的元素可拖动？

Question

In my project I'm using this drag and drop library called gridstack .在我的项目中，我使用了这个名为gridstack 的拖放库。 You can see their documentation on github here .您可以在此处查看他们在 github 上的文档。 When you hardcode elements inside the dom and initialize the gridstack, those elements are draggable.当您对 dom 内的元素进行硬编码并初始化 gridstack 时，这些元素是可拖动的。 But when the elements are created dynamically with a forloop, they are not draggable even if they have the proper draggable classes.但是当使用 forloop 动态创建元素时，即使它们具有适当的可拖动类，它们也不是可拖动的。 How can I make this work?我怎样才能使这项工作？

 //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>

Answer 1

This issue was raised here .这个问题是在这里提出的。 The grid does not automatically track external changes so the grid needs to be re-initialize for the dragIn option to notice the new dynamic widgets网格不会自动跟踪外部变化，因此需要为dragIn选项重新初始化网格以注意新的动态小部件

GridStack.setupDragIn()

Full code完整代码

 //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>

如何使用 gridstack 使动态创建的元素可拖动？

问题描述

1 个解决方案

解决方案1
0 2021-10-20 17:19:06

如何使用 gridstack 使动态创建的元素可拖动？

问题描述

1 个解决方案

解决方案1 0 2021-10-20 17:19:06

解决方案1
0 2021-10-20 17:19:06