2020-04-20 | Javascript, 算法

js拖拽自动排序

注：该文章参考链接：js拖拽自动排列

在开发中可能你会在移动端看到标签拖拽自动排序的案例，下面我举一个动态例子可能你就能更加清楚明白是什么案例了，看下面的动态图：
重要思路：找到参考点：鼠标点击选中当前的元素时，当这个元素移动到另一个元素加上元素之间距离的和的一半时（在这里元素的长度加上元素之间的距离的和时125px，每一行是5个元素），那么就要使用一个重要的公式：Math.round(x/125)+Math.round(y/125)*5，x=left + e.pageX - startX，y=top + e.pageY - startY（startX=e.pageX，startY=e.pageY，在这里它们是鼠标点击时的事件），接下来我来解释一下该公式的意思：Math.round(x/125)表示你移动几列，当超过一半时四舍五入为1，Math.round(y/125)表示你移动的行数，当超过一半时四舍五入为1，并且它需要乘以每一行的个数，即列数。
可能你还是不是很清楚，我再来举一个简单的小例子：假设总共有两行，每一行有5个元素，即：
1 2 3 4 5
6 7 8 9 10

假设将2移动到6的位置，在这里2移动到6的时候，它的x轴的移动距离等价于2移动到1的x轴距离，这个时候x=left+e.pageX-startX=0，这个时候首先2的x轴变为0，同理2的y轴是四舍五入之后变为+1，然后再乘以一行的个数5，得出值为：0+1*5=5。
移动的条件：移动的下标不等于初始化的下标。当从小移动到大时，在这个范围内的序列都要-1；当从大移动到小时，在这个范围内的序列都要+1。
如果移动计算出来的下标当前最大值时，将它置为最大值，如果移动计算出来的下标当前小于0时，将它置为0。

接着就是整体的代码，然后我将代码容易出错的地方进行相关的注释，具体代码如下所示:

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>js拖拽自动排序</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  html,
  body {
    width: 100%;
    height: 100%;
    user-select: none;
  }
  h1 {
    text-align: center;
  }
  .wrap {
    position: relative;
    width: 600px;
    height: 400px;
    margin: 100px auto;
    border: solid 1px black;
  }
  .wrap div {
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;
    background: rgb(243, 243, 243);
    /* 保证剩下的元素在移动时可以有一个过渡效果 */
    transition: all 0.5s;
  }
  .wrap p {
    background: gray;
    color: #fff;
    padding-left: 5px;
  }
</style>
<body>
  <h1>js拖拽自动排序</h1>
  <div class="wrap" id="elWrap">
    <div><p>1</p></div>
    <div><p>2</p></div>
    <div><p>3</p></div>
    <div><p>4</p></div>
    <div><p>5</p></div>
    <div><p>6</p></div>
    <div><p>7</p></div>
    <div><p>8</p></div>
    <div><p>9</p></div>
    <div><p>10</p></div>
    <div><p>11</p></div>
    <div><p>12</p></div>
    <div><p>13</p></div>
    <div><p>14</p></div>
    <div><p>15</p></div>
  </div>
  <script>
    let index = 0  // 初始化下标
    let elArr = document.getElementById('elWrap').children
    let elList = []  // 存储每个元素的字段
    for (let i = 0; i < elArr.length; i++) {
      // el代表这个元素，sort代表元素排列的位置，index代表当前元素的index，它是不会改变的
      elList.push({ el: elArr[i], sort: i, index: i })
      // 给每个元素绑定事件
      elList[i].onClick = addEvent(elList[i])
    }
    // 初始化给div元素进行排列
    moveItem(elList, 125)

    function addEvent(item) {
      item.el.addEventListener('mousedown', (e) => {
        item.el.style.zIndex = 2
        item.el.style.transition = 'all 0s' // 鼠标在按下时过渡为0，避免在移动时出现过渡效果
        let startX = e.pageX  // 鼠标相对于浏览器有效区域x坐标（随滚动条滚动而改变）
        let startY = e.pageY
        let left = item.el.offsetLeft  // 元素外边距离（绝对定位参照）最近定位父元素内壁的距离
        let top = item.el.offsetTop

        let moveFun = (e) => {
          let X = left + e.pageX - startX
          let Y = top + e.pageY - startY
          item.el.style.left = X + 'px'
          item.el.style.top = Y + 'px'
          // 其他元素随着点击元素的移动而移动
          reRange(item, X, Y, 125)  // 在这里125表示元素的自身长度以及元素之间距离的和
        }
        document.addEventListener('mousemove', moveFun)
        document.addEventListener('mouseup', () => {
          document.removeEventListener('mousemove', moveFun)  // 移除鼠标移动事件
          item.el.style.zIndex = 1
          item.el.style.transition = 'all 0.5s'  // 保证鼠标在松开时出现过渡效果
          // 鼠标松开之后需重新的一个更新页面效果
          moveItem(elList, 125)
        })
      })
    }
    function reRange(item, x, y, width) { // width表示元素的自身长度以及元素之间距离的和
      /* 
      * 判断条件：移动到另一个元素一半时就可以替换这个元素
      * 行：四舍五入为1，列：四舍五入为1 * 一行的个数
      * 举一个例子：1 2 3 4 5
      *            6 7 8 9 10
      * 假设将2移动到6的位置，这个时候首先2的x轴变为0，2的y轴是+1
      * 然后再乘以一行的个数5，得出的moveIndex为：0+1*5=5
      */
      let moveIndex = Math.round(x / width) + Math.round(y / width) * 5  // 鼠标点击选中当前的元素
      moveIndex = moveIndex < 0 ? 0 : moveIndex  // 当移动下标小于0时，将它置为0
      moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex  // 当移动下标大于最大值，将它置为最大值
      if (moveIndex !== index) { // 移动下标不等于初始化下标，可以发生移动
        index = moveIndex
        let currentSort = item.sort  // 当前元素排列的位置
        for (let i = 0; i < elList.length; i++) {
          if (currentSort < moveIndex) {  // 从小到大，所有排序-1
            if (elList[i].sort >= currentSort && elList[i].sort <= moveIndex) {
              elList[i].sort -= 1
            }
          } else if (currentSort > moveIndex) {  // 从大到小，所有排序+1
            if (elList[i].sort <= currentSort && elList[i].sort >= moveIndex) {
              elList[i].sort += 1
            }
          }
        }
        // 将点击的元素的sort置为moveIndex
        elList[item.index].sort = moveIndex
        // 在鼠标移动的时候也需要重新的更新页面效果
        moveItem(elList, 125)
      }
    }
    // 排列
    function moveItem(elList, width) {
      for (let i = 0; i < elList.length; i++) {
        elList[i].el.style.left = elList[i].sort % 5 * width + 'px'  // 列如何分布
        elList[i].el.style.top = parseInt(elList[i].sort / 5) * width + 'px'  // 行如何分布
      }
    }
  </script>
</body>
</html>