前因: 由于前端的组件以前实现拖拽是用el-tree-transfer这个第三方组件去实现的,但是项目中发现已经使用了el-transfer组件,但是该组件本身不支持拖拽功能,又不想改动后台和大量改动,所以想使用sortablejs这个组件去实现这个拖拽功能!

  1. 项目中缺少sorTablejs这个组件的需要先下载该组件到node_model中.
  2. 由于项目使用的Vue版本是2.5.2,所以考虑兼容性选择sortbalejs1.14.0版本
    npm install sortablejs@1.14.0
  3. 在页面中添加 import Sortable from 'sortbalejs'
  4. 在mounted(){} 钩子中加入一个函数,==以此来保证el-transfer组件正确加载之后在去执行这个函数==
1
2
3
4
5
6
7
8
9
10
this.$nextTick(() => { 
const el = this.$refs.transfer.$el; const rightPanel = el.querySelectorAll('.el-transfer-panel')[1];
 const list = rightPanel.querySelector('.el-transfer-panel__list');
  new Sortable(list, { 
  handle: '.drag-handle', // 指定拖拽手柄 
  animation: 150, 
  onEnd: (evt) => { const 
  { oldIndex, newIndex } = evt;
	const item = this.value.splice(oldIndex, 1)[0]; 
	this.value.splice(newIndex, 0, item); } }); });

==如果执行之后报错找不到list这个对象,那可能你项目是嵌套组件这么用的,那你得把这一步放到获取el-transfer数据之后再去获取list对象==