vue面板拖动切换内容

直接上源码。复制可用。好用给赞呀

<template>

  <div>

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

        <div

            class="item"

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

            :class="{'color':index===0 }"

            :key="item.key"

            draggable="true"

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

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

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

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

        >{{item.name}}</div>

    </transition-group>

// 要显示的组件，根据名称或者其他属性去判断。我这里是根据名称判断

    <tab1 v-if="currentName==='tab1'"></tab1>

    <tab2 v-else></tab2>

  </div>

</template>

import Tab1 from './tab1'

import Tab2 from './tab2'

export default {

  name: '',

  components: {

    Tab1 ,

    Tab2

  },

  data() {

    return {

      items: [

        { key: 1, name: 'tab1' },

        { key: 2, name: 'tab2 }

      ],

      dragging: null,

      currentName: 'tab1'

    }

  },

  mounted() {

  },

  methods: {

    // 拖动Tab开始

    handleDragStart(e, item) {

      this.dragging = item

    },

    handleDragEnd(e, item) {

// 拖拽结束 获取当前第一项的值，用于显示对应的组件

      this.currentName = this.items[0].name

      this.dragging = null

    },

    handleDragOver(e) {

      e.dataTransfer.dropEffect = 'move'

    },

    handleDragEnter(e, item) {

      e.dataTransfer.effectAllowed = 'move'

      if (item === this.dragging) {

        return

      }

      const newItems = [...this.items]

      const src = newItems.indexOf(this.dragging)

      const dst = newItems.indexOf(item)

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

      this.items = newItems

    }

    // 拖动Tab结束

  }

}

</script>

.content{

  width: 100%;

  display: flex!important;

  border: 1px solid #e3e3e3;

  margin-bottom: 20px;

}

.color{

  background: #BDE5FE;

}

.item{

  flex: 1;

  height: 50px;

  line-height: 50px;

  text-align: center;

}

目前是拖动两个，可添加拖动多个，看需求。有问题私信。转载请注明。

交流微信：17319784330