HTML DOM-在列表中拖拽移动元素

这个示例将会展示如何创建一个可以在里面拖拽移动元素的可以排序列表
首先还是我们的HTML结构

<div id="list">
  <div class="draggable">A</div>
  <div class="draggable">B</div>
  <div class="draggable">C</div>
  <div class="draggable">D</div>
  <div class="draggable">E</div>
</div>

修改CSS,里面的每一个元素都需要可以分别进行拖拽

.draggable {
   
    cursor: move;
    user-select: none;
}

使元素可以拖拽

这篇文章提到过如何拖拽元素，不同的是这次可以拖拽多个。

// 当前拖拽的元素
let draggingEle;

// 当前鼠标的位置相对于拖拽元素的位置
let x = 0;
let y = 0;

const mouseDownHandler = function(e) {
   
    draggingEle = e.target;

    // 计算鼠标位置
    // getBoundingClientRect()返回的是元素的大小和相对于屏幕的位置
    const rect = draggingEle.getBoundingClientRect