vuedraggable实现禅道卡片拖拽效果

<template>
  <div>
    <draggable
      class="list-group"
      :list="item"
      @end="onEnd"
      @start="onStart"
      animation="100"
      item-key="id"
      fallback-class="fallbackClass"
      :force-fallback="true"
      handle=".drag-handle"
      chosen-class="sortable"
      ghost-class="ghostClass"
    >
      <template #item="{ element }">
          <div class="list-group-item" >
              <div class="drag-handle">{{ element.title }}</div>
              <div class="component-box" v-show="!isDrag">
                {{ element.name }}
              </div>
          </div>
      </template>
    </draggable>
  </div>
</template>
<script>
import { ref, reactive, defineComponent, toRefs } from "vue";
import draggable from "vuedraggable";
export default defineComponent({
  name: "test",
  components: {
    draggable,
  },
  setup() {
    const state = reactive({
      item: [
        { name: "KonList", title: "追番地址", id: "5" },
        { name: "timeline", title: "时间轴", id: "6" },
        { name: "calendar", title: "日历", id: "7" },
        { name: "welcome", title: "欢迎页", id: "8" },
        { name: "carousel", title: "轮播图", id: "9" },
        { name: "imgs", title: "图片", id: "10" },
      ],
      isDrag: false,
    });
    const methods = {
      onEnd() {
        state.isDrag = false;
      },
      onStart() {
        state.isDrag = true;
      },
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  },
});
</script>
<style lang="scss" scoped>
.list-group-item {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
  width: 400px;
  user-select: none;
  .component-box{
    height: 100px;
  }
}

.drag-handle {
  cursor: move;
}
.ghostClass{
  opacity: 0.8;
  background: #dddddd;
box-shadow: inset 1px 1px 6px 1px rgba(0, 0, 0, 0.1);
}
.fallbackClass {
  opacity: 1;
  background-color: #fff;
  box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.5);
}
.sortable {
  .component-box{
    display: none;
  }
}
</style>

vue3项目中安装

npm i vuedraggable

直接复制粘贴代码看效果