zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Ubuntu设置默认编辑器
    Java基础学习之(15)
    Java基础学习之(9)--java的常用类
    Java基础学习之(11)--异常处理
    Java基础学习之(10)--接口
    Java基础学习之(8)--多态和抽象类
    Java基础学习之(7)--Object类
    Java基础学习之(6)--继承、访问权限、重写
    dubbo-整合springboot、基于注解的简单实例
    java安全框架之Permission学习笔记
  • 原文地址:https://www.cnblogs.com/hduhdc/p/8520616.html
Copyright © 2011-2022 走看看