vuedragable

今天使用的场景是一个病人区域（很多病人），给多个病床帮定人。

这是一对多的问题，因此需要多个dragable

      <div class="iteration-card card-nurse-4 iteration-card-empty">
        <draggable class="dragArea "  :list="assignedPatients" :options="{group:'people',chosenClass:'choose'}" @change="dragUnassignedPatients">
          <div class="inner">
            <div class="hd">
              <h3>测试空1</h3>
              <div class="empty-bed-item">
                空床<span class="plain-auxiliary plain-auxiliary-warn am-ml-10">需处置</span>
              </div>
            </div>
            <div class="bd">
              <div class="plus-item"><i class="i-card-plus"></i>添加患者</div>
            </div>
          </div>
        </draggable>
      </div>

<div class="iteration-card card-nurse-4 iteration-card-empty">
        <draggable class="dragArea " :list="assignedPatients2" :options="{group:'people',chosenClass:'choose'}" @change="dragUnassignedPatients">
          <div class="inner">
            <div class="hd">
              <h3>测试空2</h3>
              <div class="empty-bed-item">
                空床<span class="plain-auxiliary plain-auxiliary-warn am-ml-10">需处置</span>
              </div>
            </div>
            <div class="bd" @click="dialogVisibleAddPatient=true">
              <div class="plus-item"><i class="i-card-plus"></i>添加患者</div>
            </div>
          </div>
        </draggable>
      </div>

上面是两个病床。

病区在下面代码

<div class="thumbnail-list-cont">
        <draggable class="dragArea thumbnail-list" :list="unassignedPatients" :options="{group:'people'}">
          <li v-for="(element, index) in unassignedPatients" :key="index">
            <h4>{{element.name}}</h4>
            <p>32岁<i class="muted-line-txt">|</i>男</p>
            <div class="right thumbnail-right"><i class="i-angle"></i>
              <div class="menu-card-cont" style="display: none;">
                <ul class="menu-card">
                  <li><a>分配床位</a></li>
                  <li><a>出院</a></li>
                </ul>
              </div>
            </div>
          </li>
        </draggable>
      </div>

又病区望病床上拖动人。病床会出现抖动解决办法：

当拖动的时候我如果出现病床的位置被挤下来的情况，原因是在拖动的时候dragable自动生成li占位，可以找到这个元素display：none