今天使用的场景是一个病人区域(很多病人),给多个病床帮定人。
这是一对多的问题,因此需要多个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