Javascript 拖动div/lessons并获取每个div/lessons的位置

我正在开发一个课程平台网站，每门课程都可以上很多课

在数据库中，每个课程都有一个名为

position

的列，因此对于最终用户，只需按

position

的顺序创建一个查询列表，就可以按正确的顺序显示它们

问题是在管理面板中，注册完所有类后，我想通过将它们拖到我想要的位置然后保存来组织这些类，如本例所示：

在我的仪表板中，HTML和CSS如下所示

.box{
宽度：400px；
高度：30px；
线高：30px；
背景:#2323；
颜色：#fff；
边界半径：5px；
保证金：1rem0px；
填充：0.5雷姆；
}

第1课-学习HTML
第2课-学习CSS
第3课-学习JavaScript

该库可以轻松地拖动元素

下面的代码片段提供了一个简单的演示，演示了如何确定刚才拖动了哪个元素，并获取其索引

新的可排序（例如{
动画：150，
ONED：（e）=>{
日志（e.item，e.oldIndex，e.newIndex）；
//现在根据需要保存新订单
}
});
.box{
宽度：400px；
高度：30px；
线高：30px；
背景:#2323；
颜色：#fff；
边界半径：5px；
保证金：1rem0px；
填充：0.5雷姆；
}

第1课-学习HTML
第2课-学习CSS
第3课-学习JavaScript
考虑为此使用JavaScript库，例如@mfluehr使用此库我无法获取当前位置，无论div是否是屏幕上的第一个div，我只能获取原始顺序。@YungSilva使用SortableJS将起作用。在您用来保存的按钮上，单击该按钮时，只需在“box”div中循环，您可以使用计数器确定它们的位置，位置属性不相关。@imvain2，我如何通过div获得她的位置？你能举个例子吗？