Vue怎么实现拖拽穿梭框功能 四种方式分享+附代码

前言

拖拽穿梭框是一种常见的用户界面交互功能，可以让用户通过拖拽的方式将元素从一个容器移动到另一个容器。在Vue中实现这个功能有多种方式，可以根据具体的需求和项目情况选择适合的方法。

方法一：使用原生HTML5拖放功能

HTML5提供了原生的拖放功能，可以通过在元素上设置dragstart、dragover和drop事件来实现拖拽穿梭框功能。

html:
<div id="app">
  <h3>可选列表</h3>
  <ul>
    <li v-for="item in sourceList" :key="item.id" draggable="true" @dragstart="dragStart">{{ item.name }}</li>
  </ul>
  
  <h3>已选列表</h3>
  <ul @dragover="dragOver" @drop="drop">
    <li v-for="item in targetList" :key="item.id" draggable="true" @dragstart="dragStart">{{ item.name }}</li>
  </ul>
</div>

javascript:
new Vue({
  el: '#app',
  data: {
    sourceList: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' },
      { id: 3, name: '选项3' }
    ],
    targetList: []
  },
  methods: {
    dragStart(event) {
      event.dataTransfer.setData('text/plain', event.target.innerHTML);
    },
    dragOver(event) {
      event.preventDefault();
    },
    drop(event) {
      event.preventDefault();
      const data = event.dataTransfer.getData('text/plain');
      this.targetList.push({ id: Date.now(), name: data });
    }
  }
});

方法二：使用第三方组件

如果想要更简单、更高级的拖拽穿梭框功能，可以使用一些第三方组件库，例如Element UI的ElTransfer组件或vue-draggable-kit组件。

html:
<div id="app">
  <h3>可选列表</h3>
  <el-transfer v-model="sourceList"></el-transfer>
  
  <h3>已选列表</h3>
  <ul>
    <li v-for="item in targetList" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

javascript:
new Vue({
  el: '#app',
  data: {
    sourceList: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' },
      { id: 3, name: '选项3' }
    ],
    targetList: []
  }
});

方法三：自定义指令

Vue提供了自定义指令的机制，可以使用自定义指令来实现拖拽穿梭框功能。

html:
<div id="app">
  <h3>可选列表</h3>
  <ul v-draggable-list="sourceList">
    <li v-for="item in sourceList" :key="item.id">{{ item.name }}</li>
  </ul>
  
  <h3>已选列表</h3>
  <ul v-droppable-list="targetList" @drop="drop">
    <li v-for="item in targetList" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

javascript:
Vue.directive('draggable-list', {
  bind(el, binding) {
    el.addEventListener('dragstart', (event) => {
      event.dataTransfer.setData('text/plain', event.target.innerHTML);
    });
  }
});

Vue.directive('droppable-list', {
  bind(el, binding) {
    el.addEventListener('dragover', (event) => {
      event.preventDefault();
    });
  },
  update(el, binding) {
    el.addEventListener('drop', (event) => {
      event.preventDefault();
      const data = event.dataTransfer.getData('text/plain');
      binding.value.push({ id: Date.now(), name: data });
    });
  }
});

new Vue({
  el: '#app',
  data: {
    sourceList: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' },
      { id: 3, name: '选项3' }
    ],
    targetList: []
  },
  methods: {
    drop(event) {
      const data = event.dataTransfer.getData('text/plain');
      this.targetList.push({ id: Date.now(), name: data });
    }
  }
});

方法四：使用插件

如果需要更复杂的拖拽穿梭框功能，并且希望提供更多的自定义选项，可以开发一个Vue插件来实现。

javascript(插件代码):
const TransferPlugin = {
  install(Vue, options) {
    Vue.prototype.$transfer = function(sourceList, targetList) {
      // 添加自定义方法实现拖拽穿梭框功能
    };
  }
};

使用插件：
Vue.use(TransferPlugin);

new Vue({
  el: '#app',
  data: {
    sourceList: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' },
      { id: 3, name: '选项3' }
    ],
    targetList: []
  },
  mounted() {
    this.$transfer(this.sourceList, this.targetList);
  }
});

这些都是实现拖拽穿梭框功能的常见方法，可以根据项目的实际需求选择适合的方式。无论选择哪种方法，都需要理解拖拽事件和相关API的使用，以及适当的样式和交互设计。希望以上信息对您有所帮助！