Vue 拖拽组件 vuedraggable

需求如下图所示：

置灰的固定在开头，不能调整选项位置；选项可以选择也可以不选，选项之间拖动可以更换位置。

实现事例

针对这个需求，我们用到了vuedraggable ,引入方式如下

yarn add vuedraggable

import vuedraggable from 'vuedraggable';

废话不多说 直接上实例:

  
    

      
{{item.name}}
    
  

由于置灰项不可拖动，所以我手动设置可拖动项为draggable = ".enable"，示例中state为0的项为不可拖动的。

import vuedraggable from 'vuedraggable';
export default {
  name: 'CustomTable',
  components: { vuedraggable },
  data () {
    return {
      list: [{ name: '患者姓名', id: '0', state: '0' },
        { name: '性别/年龄', id: '1', state: '1' },
        { name: '就诊类型', id: '2', state: '1' },
        { name: '患者姓名', id: '5', state: '1' },
        { name: '患者姓名', id: '6', state: '2' },]
    };
  }
};