如何使用 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.