Demo:2023-12-27

在vue3中使用sortablejs实现拖拉拽功能

<template>
  <div class="about">
    <div class="left">
      <ul id="left-list" ref="leftList">
        <li>123</li>
        <li>456</li>
        <li>789</li>
      </ul>
    </div>
    <div class="right">
      <ul id="right-list" ref="rightList">
        <li>666</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import Sortable from "sortablejs";

onMounted(() => {
  const leftList = document.getElementById("left-list");
  const rightList = document.getElementById("right-list");
  console.log(leftList, rightList);
  Sortable.create(leftList, {
    group: "shared", // 设置分组名，用于跨列表拖拽
    animation: 150, // 拖拽过程中的动画时间（单位：毫秒）
    onEnd: function (evt) {
      // 当从左侧列表拖拽项添加到右侧列表时触发的回调函数
      const item = evt.item; // 获取拖拽的元素
      rightList.appendChild(item); // 将元素添加至右侧列表
    },
  });

  Sortable.create(rightList, {
    group: "shared", // 设置分组名，与左侧列表的分组名保持一致
    animation: 150, // 拖拽过程中的动画时间（单位：毫秒）
    onEnd: function (evt) {
      // 当从右侧列表拖拽项添加到左侧列表时触发的回调函数
      const item = evt.item; // 获取拖拽的元素
      leftList.appendChild(item); // 将元素添加至右侧列表
    },
  });
});
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.about {
  display: flex;
  justify-content: space-around;

  .left {
    padding: 10px;
    background-color: skyblue;
  }

  .right {
    padding: 10px;
    background-color: pink;
  }
}
</style>