vue 拖拽排序

<template>

  <div>

    <transition-group tag="div" class="container">

      <div

        class="item"

        v-for="(item,index) in items"

        :key="item.key"

        :style="{background:item.color,width:'80px',height:'80px'}"

        draggable="true"

        @dragstart="handleDragStart($event, item)"

        @dragover.prevent="handleDragOver($event, item)"

        @dragenter="handleDragEnter($event, item)"

        @dragend="handleDragEnd($event, item)"

      ></div>

    </transition-group>

  </div>

</template>



<script>

export default {

  name: "pzoomFormPlaceBid",

  props: {

    value: Object,

  },

  data() {

    return {

      items: [

        { key: 1, color: "#ffebcc" },

        { key: 2, color: "#ffb86c" },

        { key: 3, color: "#f01b2d" },

      ],

      dragging: null,

      dataList: [],

      siteMap: [

        {

          key: "SITE_SET_KANDIAN",

          name: "腾讯看点",

          parent: "tx",

          bid: null,

        },

        {

          key: "SITE_SET_QQ_MUSIC_GAME",

          name: "QQ、腾讯音乐及游戏",

          parent: "tx",

          bid: null,

        },

        {

          key: "SITE_SET_TENCENT_NEWS",

          name: "腾讯新闻",

          parent: "tx",

          bid: null,

        },

        {

          key: "SITE_SET_TENCENT_VIDEO",

          name: "腾讯视频",

          parent: "tx",

          bid: null,

        },

        {

          key: "SITE_SET_MOBILE_UNION",

          name: "优量汇",

          parent: "ylh",

          bid: null,

        },

      ],

      // bid_adjustment: {

      //   site_set_package: [

      //     {

      //         site_set: [

      //             "SITE_SET_QZONE"

      //         ],

      //         bid_coefficient: 1

      //     },

      //     {

      //         site_set: [

      //             "SITE_SET_QZONE",

      //             "SITE_SET_QZONE",

      //         ],

      //         bid_coefficient: 2

      //     }

      //   ]

      // }

    };

  },

  watch: {

    "value.site_set": {

      handler(val) {

        if (this.$store.createWatchLock) {

          return false;

        }

        if (val.length > 0) {

          if (val.includes("SITE_SET_MOBILE_UNION")) {

          }

        }

      },

      immediate: false,

    },

  },

  methods: {

    handleDragStart(e, item) {

      this.dragging = item;

    },

    handleDragEnd(e, item) {

      this.dragging = null;

    },

    //首先把div变成可以放置的元素，即重写dragenter/dragover

    handleDragOver(e) {

      console.log("handleDragOver");

      e.dataTransfer.dropEffect = "move"; // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!

    },

    handleDragEnter(e, item) {

      e.dataTransfer.effectAllowed = "move"; //为需要移动的元素设置dragstart事件

      if (item === this.dragging) {

        return;

      }

      const newItems = [...this.items];

      console.log(newItems);

      const src = newItems.indexOf(this.dragging);

      const dst = newItems.indexOf(item);



      newItems.splice(dst, 0, ...newItems.splice(src, 1));



      this.items = newItems;

    },

  },

};

</script>



<style lang="scss" scoped>

</style>