CSS3拖拽排序

最新推荐文章于 2024-04-26 11:30:22 发布

清水白菜涮羊肉

最新推荐文章于 2024-04-26 11:30:22 发布

阅读量208

点赞数

文章标签：数学建模

本文链接：https://blog.csdn.net/weixin_65228533/article/details/130820872

版权

<template>
  <div class="root">
    <transition-group tag="div" class="container">
      <div
          class="item"
          :class="'item' + i"
          v-for="(item, i) in items"
          :key="item.key"
          :style="{ 'background-color': item.color, border: '1px solid' }"
          draggable="true"
          @dragstart="handleDragStart($event, item)"
          @dragover.prevent="handleDragOver($event, item)"
          @dragenter="handleDragEnter($event, item)"
          @dragend="handleDragEnd($event, item)"
      >
        <div>{{ item }}</div>
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      items: [
        { key: 1, color: "#3883a0" },
        { key: 2, color: "#4883a0" },
        { key: 3, color: "#5883a0" },
        { key: 4, color: "#6883a0" },
        { key: 5, color: "#7883a0" },
        { key: 6, color: "#8883a0" },
        { key: 7, color: "#9883a0" },
      ],
      ending: null,
      dragging: null,
    };
  },
  methods: {
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd() {
      if (this.ending.key === this.dragging.key) {
        return;
      }
      let newItems = [...this.items];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(this.ending);
      newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]));
      console.log(newItems);

      this.items = newItems;
      this.$nextTick(() => {
        this.dragging = null;
        this.ending = null;
      });
    },
    handleDragOver(e) {
      // 首先把div变成可以放置的元素，即重写dragenter/dragover
      // 在dragenter中针对放置目标来设置
      e.dataTransfer.dropEffect = "move";
    },
    handleDragEnter(e, item) {
      // 为需要移动的元素设置dragstart事件
      e.dataTransfer.effectAllowed = "move";
      this.ending = item;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 23%;
  height: 200px;
  margin: 10px;
  color: #fff;
  transition: all linear 0.3s;
}
</style>

记一个多行多列的交换拖拽排序。

效果图如下：