create an array by drag and drop items
Question
I want to create an app to visually order an array of items, let say this is the referenceArray :
const referenceArray = ["item 1", "item 2", "item 3", "item 4", "item 5", "item 6", "item 17"];
Now let's say we want to reorder the above array to an array of array: (this is not intentional)
result = [ ["item 1", "item 2", "item 3"], ["item 4"], ["item 5", "item 6"], [ "item 17"] ]
I want to get the above result by drag and drop the visual representation of the referenceArray so that each column will be an array inside the main array and items in the column will be the elements in inside array...
So we give the referenceArray to the app, then we reorder the items by drag and dropping and finally we get the result array as reordered version of referenceArray which each column is a array inside the main array and each item in a column is an element of the inside array.
So for getting the above result we should drag and drop items like this:
So far I have this simple drag and drop using jQuery UI, but it's not what we want as you see:
$(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 answers
solution1
1 2020-10-07 15:06:59
You can use connectWith of jquery sortable to make relationship between other sortable elements.In below code , i have created separate uls and have use connectWith: ".sortable" to connect them with one another.
Then, onclick of button i have get the length of .sortable class depending on this i have use each to iterate through all uls and store them in array of array.
Demo Code
$(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.