通過拖放項目創建數組
[英]create an array by drag and drop items
問題描述
我想創建一個應用程序來直觀地對一組項目進行排序，假設這是referenceArray ：
const referenceArray = ["item 1", "item 2", "item 3", "item 4", "item 5", "item 6", "item 17"];
現在假設我們想將上述數組重新排序為數組數組：（這不是故意的）
result = [ ["item 1", "item 2", "item 3"], ["item 4"], ["item 5", "item 6"], [ "item 17"] ]
我想通過拖放referenceArray的視覺表示來獲得上述結果，以便每一列都是主數組內的一個數組，而列中的項目將是數組內的元素...
因此，我們將referenceArray給應用程序，然后通過拖放對項目進行重新排序，最后我們將result數組作為referenceArray重新排序版本，其中每一列都是主數組中的一個數組，而列中的每個項目都是內部數組。
因此，為了獲得上述結果，我們應該像這樣拖放項目：
到目前為止，我使用 jQuery UI 進行了這個簡單的拖放操作，但正如您所見，這不是我們想要的：
$(document).ready(function (e) { $("#sortable").sortable(); $("#sortable").disableSelection(); $("#btn").on("click", function () { const positions = []; $("#sortable li").each(function (index, element) { positions.push($(this).text()) }); console.log(positions) }); });
#sortable { display: inline-block; list-style-type: none; margin: 0; padding: 0; width: 70%; } ul { columns: 5; -webkit-columns: 5; } #sortable li { margin: 0 3px 3px 3px; cursor: move; font-size: 1vw; height: 18px; background: gainsboro; } #sortable li span { position: absolute; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> </head> <body> <h1>Sort listing using drag & drop</h1> <ul id="sortable"> <li class="ui-state-default" id="1"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 1</li> <li class="ui-state-default" id="2"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 2</li> <li class="ui-state-default" id="3"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 3</li> <li class="ui-state-default" id="4"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 4</li> <li class="ui-state-default" id="5"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 5</li> <li class="ui-state-default" id="6"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 6</li> <li class="ui-state-default" id="7"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 7</li> <li class="ui-state-default" id="1"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 8</li> <li class="ui-state-default" id="2"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 9</li> <li class="ui-state-default" id="3"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 10</li> <li class="ui-state-default" id="4"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 11</li> <li class="ui-state-default" id="5"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 12</li> <li class="ui-state-default" id="6"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 13</li> <li class="ui-state-default" id="7"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 14</li> </ul> <p>Drag and drop list to reposition...</p> <button id="btn">Get positions and save them into an array of arrays</button> <div class="show"></div> <script src="script.js"></script> </body> </html>
1 個解決方案
解決方案1
1 2020-10-07 15:06:59
您可以使用 jquery sortable 的connectWith來建立其他可排序元素之間的關系。在下面的代碼中，我創建了單獨的uls並使用connectWith: ".sortable"將它們相互連接。
然后，點擊按鈕我得到了.sortable類的長度，具體取決於這個我使用each來遍歷所有uls並將它們存儲在數組數組中。
演示代碼
$(document).ready(function(e) { $(".sortable").sortable({ connectWith: ".sortable"//use this to connect with other uls }); $(".sortable").disableSelection(); $("#btn").on("click", function() { const positions = []; var count = 0; //get length of all sortable class var length = $(".sortable").length; //chck if count is less then length while (count < length) { //create empty arry data = [] //loop thorugh uls .. li $("ul:eq(" + count + ") li").each(function(index, element) { data.push($(this).text())//push data in array }); positions.push(data)//push datas in outer array count++;//increment } console.log(positions) }); });
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> </head> <body> <h1>Sort listing using drag & drop</h1> <ul class="sortable"> <li class="ui-state-default" id="1"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 1</li> <li class="ui-state-default" id="2"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 2</li> <li class="ui-state-default" id="3"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 3</li> <li class="ui-state-default" id="4"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 4</li> </ul> <ul class="sortable"> <li class="ui-state-default" id="5"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 5</li> <li class="ui-state-default" id="6"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 6</li> <li class="ui-state-default" id="7"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 7</li> </ul> <ul class="sortable"> <li class="ui-state-default" id="1"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 8</li> <li class="ui-state-default" id="2"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 9</li> <li class="ui-state-default" id="3"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 10</li> </ul> <ul class="sortable"> <li class="ui-state-default" id="4"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 11</li> <li class="ui-state-default" id="5"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 12</li> <li class="ui-state-default" id="6"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 13</li> <li class="ui-state-default" id="7"><span class="ui-icon ui-icon-arrowthick-2-ns"></span>Item 14</li> </ul> <p>Drag and drop list to reposition...</p> <button id="btn">Get positions and save them into an array of arrays</button> <div class="show"></div> <script src="script.js"></script> </body> </html>
拖放“刪除的項目”
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.