vue实现可拖拽列表

最新推荐文章于 2024-08-07 16:40:14 发布

原创最新推荐文章于 2024-08-07 16:40:14 发布 · 1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章介绍了如何使用Vue.js实现一个可拖拽列表，包括dragstart,dragenter,dragend等事件处理以及TransitionGroup的使用，展示了如何在列表中拖动元素并保持数据同步。

直接上代码

<!-- vue实现可拖拽列表 -->
<template>
  <div>
    <button @click="logcolig">打印数据</button>
    <TransitionGroup name="list" tag="div" class="container">
      <div
        class="item"
        v-for="(item, i) in list"
        :key="item.id"
        :draggable="true"
        @dragstart="dragstart($event, i)"
        @dragenter="dragenter($event, i)"
        @dragend="dragend"
        @dragover="dragover"
      >
        {{ item.name }}
      </div>
    </TransitionGroup>
  </div>
</template>

<script>
let dragIndex = 0;

export default {
  created() {},
  mounted() {},
  beforeDestroy() {},
  props: {},
  data() {
    return {
      list: [
        { name: "a", id: 1 },
        { name: "b", id: 2 },
        { name: "c", id: 3 },
        { name: "d", id: 4 },
        { name: "e", id: 5 },
      ],
    };
  },
  //方法集合
  methods: {

    logcolig(){
      console.log(this.list);
    },
    dragstart(e, index) {
      e.stopPropagation();
      dragIndex = index;
      setTimeout(() => {
        e.target.classList.add("moveing");
      }, 0);
    },
    dragenter(e, index) {
      e.preventDefault();
      // 拖拽到原位置时不触发
      if (dragIndex !== index) {
        const source = this.list[dragIndex];
        this.list.splice(dragIndex, 1);
        this.list.splice(index, 0, source);

        // 更新节点位置
        dragIndex = index;
      }
    },
    dragover(e) {
      e.preventDefault();
      e.dataTransfer.dropEffect = "move";
    },
    dragend(e) {
      e.target.classList.remove("moveing");
    },
  },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.item {
  width: 200px;
  height: 40px;
  line-height: 40px;
  // background-color: #f5f6f8;
  background-color: skyblue;
  text-align: center;
  margin: 10px;
  color: #fff;
  font-size: 18px;
}

.container {
  position: relative;
  padding: 0;
}

.moveing {
  opacity: 0;
}

.list-move, .list-enter-active, .list-leave-active {
  transition: all 0.2s ease;
}
</style>