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

Question

我正在开发一个类(class)平台站点，每个类(class)可以有很多课。

在数据库中，每节课都有一个名为position的列，所以对于最终用户来说，只需按position顺序查询列表，然后它们就会显示出来以正确的顺序。

问题出在管理面板，注册完所有类(class)后，我想通过将它们拖到我想要的位置然后保存来组织类(class)，如本例所示:

https://drive.google.com/file/d/1L__uKtZXrSC3huhoCuZ-AaKlPOCPtC3U/view?usp=sharing

在我的仪表板中，HTML 和 CSS 看起来像这样

.box {
    width: 400px;
    height: 30px;
    line-height: 30px;
    background: #232323;
    color: #fff;
    border-radius: 5px;
    margin: 1rem 0px;
    padding: 0.5rem;
  }

<div class="box" position="1">lesson 1 - learn HTML</div>
<div class="box" position="2">lesson 2 - learn CSS</div>
<div class="box" position="3">lesson 3 - learn JavaScript</div>

那么如何拖动 div/类(class)，始终保持 position 属性 具有 div 所在位置的正确值？

Answer 1

SortableJS库使拖动元素变得容易。 Detailed library options are explained here.

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

new Sortable(example, {
  animation: 150,
  onEnd: (e) => {
    console.log(e.item, e.oldIndex, e.newIndex);
    // Now save the new order, as needed
  }
});

.box {
  width: 400px;
  height: 30px;
  line-height: 30px;
  background: #232323;
  color: #fff;
  border-radius: 5px;
  margin: 1rem 0px;
  padding: 0.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.9.0/Sortable.min.js"></script>

<div id="example">
  <div class="box" position="1">lesson 1 - learn HTML</div>
  <div class="box" position="2">lesson 2 - learn CSS</div>
  <div class="box" position="3">lesson 3 - learn JavaScript</div>
</div>