通过拖放项目创建数组
[英]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.