vue中使用Sortable.js实现拖拽功能

安装Sortable.js
npm install sortablejs --save

<template>
  <div id="box">
    <!--  ref就是为了获取el对象  -->
    <div ref="item1" class="box">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>
    </div>
    <div ref="item2" class="box">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>
    </div>
  </div>
  <div id="box1" ref="item3">
    <div class="box_1">1</div>
    <div class="box_2">2</div>
    <div class="box_3">3</div>
    <div class="box_4">4</div>
    <div class="box_5">5</div>
    <div class="box_6">6</div>
    <div class="box_7">7</div>
    <div class="box_8">8</div>
    <div class="box_9">9</div>
  </div>
</template>

<script>
// 引入 sortablejs
import Sortable from 'sortablejs';
import {onMounted, ref} from "vue";
export default {
  name: "SortableJS",
  setup(){
    const item1 = ref(null)
    const item2 = ref(null)
    const item3 = ref(null)
    onMounted(()=>{
      Sortable.create(item1.value,{
        //动画效果
        animation: 1000,
        // 是否执行两个盒子之间互换
        group:'box'
      })
      Sortable.create(item2.value,{
        //动画效果
        animation: 1000,
        // 是否执行两个盒子之间互换，就是不同盒子之间可以互换
        group:'box'
      })
      Sortable.create(item3.value,{
        //动画效果
        animation: 1000,
      })
      console.log(Sortable.create(item1.value))
      console.log(Sortable.create(item2.value))
      console.log(Sortable.create(item3.value))
    })
    return{
      item1,
      item2,
      item3
    }
  }
}
</script>

<style scoped lang="less">
  #box{
    width: 100%;
    display: flex;
    margin-top: 20px;
    grid-gap: 20px;
    div{
      flex: 1;

      div{
        cursor: move;
        width: 100%;
        height: 100px;
        background: #ccc;
        margin-bottom: 20px;
      }
    }
  }
  #box1{
    display: grid;
    // 每一列多少个
    grid-template-columns: repeat(3,auto);
    // 每一行多少个
    grid-template-rows: repeat(3,auto);
    // 行与行之间的距离
    grid-row-gap: 20px;
    // 列与列之间的距离
    grid-column-gap: 20px;
    text-align: center;
    height: 300px;
    width: 500px;
    div{
      font-size: 20px;
      cursor: move;
    }
    .box_1{
      background: rebeccapurple;
    }
    .box_2{
      background: bisque;
    }
    .box_3{
      background: yellow;
    }
    .box_4{
      background: blue;
    }
    .box_5{
      background: slategray;
    }
    .box_6{
      background: chartreuse;
    }
    .box_7{
      background: fuchsia;
    }
    .box_8{
      background: saddlebrown;
    }
    .box_9{
      background: aqua;
    }
  }
</style>

效果图

实现拖拽变化

Github地址：https://github.com/SortableJS/Sortable

中文文档地址：https://www.itxst.com/sortablejs/neuinffi.html

官网地址：http://www.sortablejs.com/index.html