前言

官网 - http://www.sortablejs.com/index.html
中文文档 - https://www.itxst.com/sortablejs/neuinffi.html
npm - https://www.npmjs.com/package/sortablejs

npm下载

npm i sortablejs

umd

  <script src="https://www.itxst.com/package/sortable/sortable.min.js"></script>

例子

    const el = document.querySelector('.template-group')//拖拽的父元素
    new Sortable(el, {
        group: { name: "z", pull: true, put: true },
        filter: '.viz-group',// 过滤
        draggable: ".viz-item",//拖拽的元素
        animation: 300,//动画时间
        handle: ".viz-move",//拖拽句柄  - 就是要拖拽的子元素
        easing: 'cubic-bezier(0.16, 1, 0.3, 1)',//动效 
        ghostClass: 'drop-select',//拖拽class
    })

拖拽句柄解释

如下图

假如设置了拖拽句柄，要拖拽红框的元素，黄框就是拖拽句柄。
只有当拖拽句柄才能拖拽红框元素

在这里插入图片描述

Demo

demo.html

<style>
    .box {
      width: 200px;
      max-width: 220px;
    }

    .item,
    .title {
      display: flex;
      justify-content: space-between;
      height: 30px;
      align-items: center;
      border: solid 1px #ccc;
      border-style: none none solid solid;
    }

    .title {
      background-color: #f4f4f4;
    }

    .move {
      background-color: rgb(116, 199, 202);
      width: 30px;
      height: 100%;
      cursor: grab;
    }

    .move:hover {
      background-color: cadetblue;
    }

    /* 拖拽样式 */
    .drop-select {
      background: rgba(18, 188, 255, 0.25);
    }
  </style>
  <body>
    <div class="box">
      <!-- .item拖拽的元素 -->
      <div class="item">
        <div class="item-grid">文本1</div>
        <!-- .move 拖拽的句柄 -->
        <div class="move"></div>
      </div>
      <div class="item">
        <div class="item-grid">文本2</div>
        <div class="move"></div>
      </div>
      <div class="item">
        <div class="item-grid">文本3</div>
        <div class="move"></div>
      </div>
      <div class="item">
        <div class="item-grid">文本4</div>
        <div class="move"></div>
      </div>
      <div class="item">
        <div class="item-grid">文本5</div>
        <div class="move"></div>
      </div>
      <div class="item">
        <div class="item-grid">文本6</div>
        <div class="move"></div>
      </div>
      <div class="title">更多</div>
      <div class="item">
        <div class="item-grid">6666</div>
        <div class="move"></div>
      </div>
      <div class="item">
        <div class="item-grid">7777</div>
        <div class="move"></div>
      </div>
      <div class="item">
        <div class="item-grid">520</div>
        <div class="move"></div>
      </div>
    </div>
    <script src="https://www.itxst.com/package/sortable/sortable.min.js"></script>
    <script>
      const el = document.querySelector(".box");
      new Sortable(el, {
        group: { name: "group1", pull: true, put: true },
        filter: ".title", // 过滤
        draggable: ".item", //拖拽的元素
        animation: 300, //动画时间
        handle: ".move", //拖拽句柄  - 就是要拖拽的子元素
        easing: "cubic-bezier(0.16, 1, 0.3, 1)", //动效
        ghostClass: "drop-select", //拖拽class
      });
    </script>
  </body>