【发布时间】：2021-01-22 03:54:33
【问题描述】：
我想创建一个应用程序来直观地订购一系列项目，假设这是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-n-s"></span>Item 1</li>
<li class="ui-state-default" id="2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default" id="3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default" id="4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default" id="5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default" id="6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default" id="7"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
<li class="ui-state-default" id="1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 8</li>
<li class="ui-state-default" id="2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 9</li>
<li class="ui-state-default" id="3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 10</li>
<li class="ui-state-default" id="4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 11</li>
<li class="ui-state-default" id="5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 12</li>
<li class="ui-state-default" id="6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 13</li>
<li class="ui-state-default" id="7"><span class="ui-icon ui-icon-arrowthick-2-n-s"></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>
【问题讨论】：
-
要按照您的要求进行这项工作，您需要有 4 个独立但连接的
sortable()列表，每列一个。然后要生成最终数组，您需要从每个可排序对象中获取值并将它们放入父数组中。 -
我无法使用上面的代码对项目进行排序...因为如果您从列中删除一个项目，另一个替换它...
-
这正是我的观点。
-
我试过没有运气...我想我需要帮助找到合适的解决方案...
标签： javascript html jquery css jquery-ui