使用HTML5的Drag和Drop属性实现拖放效果

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5中，拖放是标准的一部分，任何元素都能够拖放。

一、原理
此笔记中，只使用到了1个属性和3个方法。分别如下：

• draggable -- 设置是否拖拽
• ondragstart -- 拖拽开始时触发
• ondragover -- 拖拽中触发
• ondrop -- 拖拽结束时触发

二、踩坑
这里以vue语法为例。首先拖拽对象需要设置为draggable="true"，并且添加一个方法为@dragstart="drag()"；然后在拖拽目标对象上增加2个方法，分别是@drop="drop()"和@dragover="draging()"。

<div
  :key="index"
  style="cursor: default;"
  v-else-if="typeStatus"
  :class="{
    occupybg: true
  }"
  @click.stop="$emit('getOccupyCurData',occupyCurData)"
  @drop='drop($event,item)'
  @dragover='draging($event)'
>
  <!-- 占用 --> 
  {{ item.patientInfoText ? item.patientInfoText : '' }}{{item.treatDeviceModelName ? '('+item.treatDeviceModelName+')':''}}
</div>
<div v-else @click="notNllocationClick" class="notarrangebg" :key="index"  
  @drop='drop($event,item)'
  @dragover='draging($event)'>
  <!-- 未分配 -->
</div>

注意了，在dragover方法中需要阻止默认事件，否则drop方法无法触发。

//拖拽中 
draging(event) {
  console.log('拖拽中');
  console.log(event);
  event.preventDefault();
},

剩下的逻辑无非就是拖拽时获取当前元素值以及拖拽后的目标元素值，然后根据参数写ajax再重新渲染数据即可。如下：

drag(event,item) {
  console.log('格子拖拽开始');
  console.log(event);
  console.log(item);
  //获取患者详情
  getMyCurrDateTreatArrangeList().then(res => {
    console.log(res);
    var obj = {};
    res.find((resItem) => {
        if(item.treatPlanOrderDataId == resItem.treatPlanOrderDataId){
            obj = resItem;
        }
    })
    console.log(obj);
    this.$store.commit('setAddArrangeTrim',{
        fromArrangeDataId:obj.arrangeDataId,
        fromArrangeFixDataId:obj.arrangeFixDataId,
        patientDataId: obj.patientDataId
    })
  })
}

三、效果