前因: 由于前端的组件以前实现拖拽是用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组件正确加载之后在去执行这个函数==
  5. 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对象==