Vue 拖拽组件 vuedraggable

需求如下图所示：

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

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

yarn add vuedraggable

import vuedraggable from 'vuedraggable';

废话不多说 直接上实例:

<vuedraggable class="draggable-wrapper clearfix" v-model="list" draggable = ".enable">
  <transition-group>
    <div v-for="(item, index) in list"
      :key="index"
      class="draggable-item fl"
      :class="{'active': item.state === '1', 'enable': item.state !== '0'}"
      @click="handleSelect(item)">
      <p>{{item.name}}</p>
    </div>
  </transition-group>
</vuedraggable>

由于置灰项不可拖动，所以我手动设置可拖动项为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' },]
    };
  }
};

<style lang="less">
@import '~@/styles/variables.less';
.custom-dialog{
  .el-dialog__body{
    padding: 30px 20px 80px;
  }
  .draggable-wrapper{
    .draggable-item{
      width: 100% / 8;
      float: left;
      padding: 1px 6px;
      color: @color-children-item;
      border-radius: 50px;
      margin-left: 10px;
      margin: 0 0 20px 10px;
      font-family: @font-family-main;
      background: #eee;
      cursor: not-allowed;
      &.enable{
        background: transparent;
        cursor: pointer;
      }
      &.active{
        background: @color-children-item-activebg;
        color: @color-children-item-active;
      }
      i{
        font-size: @font-size-sm;
        margin-right: -3px;
        font-weight: bold;
      }
    }
  }
}
</style>