废话不多说 直接上实例:

<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>
  </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;
        font-size: @font-size-sm;
        margin-right: -3px;
        font-weight: bold;