Javascript 通过拖放项创建数组

我想创建一个应用程序，以直观地订购一组项目，假设这是

参考阵列

：

const referenceArray = ["item 1", "item 2", "item 3", "item 4", "item 5", "item 6", "item 17"];

现在让我们假设我们想要将上面的数组重新排序为数组的数组：（这不是有意的）

我想通过拖放

referenceArray

的可视化表示来获得上述结果，这样每一列都将是主数组中的一个数组，列中的项将是数组中的元素

因此，我们将

referenceArray

提供给应用程序，然后通过拖放对项目进行重新排序，最后我们得到

结果

数组，作为

referenceArray

的重新排序版本，其中每一列都是主数组中的一个数组，每一列中的每一项都是内部数组的一个元素

因此，为了获得上述结果，我们应该拖放如下项：

到目前为止，我已经使用jQuery UI实现了这个简单的拖放操作，但正如您所看到的，这并不是我们想要的：

$（文档）.ready（函数（e）{
$（“#可排序”）.sortable（）；
$（“#可排序”）.disableSelection（）；
$（“#btn”）。在（“单击”，函数（）{
常量位置=[]；
$（“#可排序li”）。每个（函数（索引，元素）{
positions.push（$（this.text（））
});
控制台日志（位置）
});
});
#可排序{
显示：内联块；
列表样式类型：无；
保证金：0；
填充：0；
宽度：70%；
}
保险商实验室{
栏目：5个；
-webkit栏目：5个；
}
#可悲的李{
保证金：0 3px 3px 3px；
光标：移动；
字体大小：1vw；
高度：18px；
背景：gainsboro；
}
#可排序李跨度{
位置：绝对位置；
}

使用拖放对列表进行排序

第1项
第2项
第3项
第4项
第5项
第6项
第7项
第8项
第9项
第10项
第11项
第12项
第13项
第14项

拖放列表以重新定位

获取位置并将其保存到数组中
您可以使用jquery sortable在其他可排序元素之间建立关系。在下面的代码中，我创建了单独的
uls
，并使用
connectWith:“.sortable”
将它们彼此连接起来

然后，单击按钮，我就得到了
.sortable
类的长度，根据这一点，我使用
每个
迭代所有
uls
，并将它们存储在数组的数组中

演示代码


$（文档）.ready（函数（e）{
$（“.sortable”）.sortable({
connectWith:“.sortable”//使用此选项连接其他uls
});
$（“.sortable”）.disableSelection（）；
$（“#btn”）。在（“单击”，函数（）{
常量位置=[]；
var计数=0；
//获取所有可排序类的长度
变量长度=$（“.sortable”）.length；
//如果计数小于长度，则检查
while（计数<长度）{
//创建空arry
数据=[]
//loop thorugh uls..li
$（“ul:eq（“+count+”）li”）。每个（函数（索引，元素）{
data.push（$（this.text（））//在数组中推送数据
});
positions.push（data）//外部数组中的push数据
计数+++；//增量
}
控制台日志（位置）
});
});

使用拖放对列表进行排序

第1项
第2项
第3项
第4项


第5项
第6项
第7项


第8项
第9项
第10项


第11项
第12项
第13项
第14项

拖放列表以重新定位

获取位置并将其保存到数组中
要按您的要求执行此操作，您需要有4个独立但连接的
sortable（）
列表，每列一个。然后，要生成最终的数组，您需要从每个可排序表中获取值并将它们放入父数组中。。。因为如果你从一列中删除一个项目，另一个项目会替换它…这正是我的观点。我尝试过，但没有运气。。。我想我需要一只手来找到一个合适的解决方案…当我试图将它们对齐到水平列时，它不起作用…嗨，你能用你在当前代码中所做的更改创建演示代码吗？嗨，斯瓦蒂，我实际上更新了问题（使用当前代码的新问题），请看一下：我修复了上一个问题：
   result = [ ["item 1", "item 2", "item 3"], ["item 4"], ["item 5", "item 6"], [ "item 17"] ]