Vue中实现元素拖动效果的方法介绍

一、H5原生的drag&drop

• draggable=true（必需）
• ondragstart：拖动开始时触发
• ondrag：拖动过程中触发
• ondragend：拖动结束触发
• ondragenter ：被拖动元素进入到目标区域时触发
• ondragover ：被拖动元素在目标区域移动时触发
• ondragleave ：被拖动元素离开目标区域时触发
• ondrop ：释放鼠标时触发

二、实际例子

2.1 被拖动元素–折叠面板（子组件）

<template>
  <div>
      <a-collapse @change="handleCollapseChange($event, step, index)" draggable="true" @dragstart.native="dragStart($event, step, index)">
        <a-collapse-panel key="1" :forceRender="true">
          <span slot="header">
            <!--编辑页面使用-->
            <span v-if="(step.sceneStepType === 'HTTP用例') || (step.sceneStepType === 'RPC用例') || (step.sceneStepType === '场景用例')">Step{{index + 1}}   {{step.sceneStepName}}</span>
            <span v-if="step.sceneStepType === 'GET请求'">Step{{index + 1}}
              <a-input style="width: 20%" v-model="step.sceneStepName" @click="handleGetRequestChange($event, step)"></a-input>
            </span>
            <span v-if="step.sceneStepType === '条件' && !step.hasOwnProperty('sceneCaseStepResult')">Step{{index + 1}}  If
            <a-input style="width: 10%" v-model="step.sceneFirstExpression" @click="handleFirstExpressionChange($event, step)"></a-input>
            <a-select style="width: 10%" v-decorator="['sceneExpressionJudgeCondition',{ initialValue: step.sceneExpressionJudgeCondition, rules: [{message: 'Please select your gender!' }] },]" placeholder="Select a option and change input text above" @change="handleSelectChange($event, step)">
              <a-select-option v-for="item in stepResultVerifyList" :value="item" :key="item">
                {{item}}
              </a-select-option>
            </a-select>
            <a-input style="width: 10%" v-model="step.sceneSecondExpression" @click="handleSecondExpressionChange($event, step)"></a-input>
          </span>
            <span style="float: right;"><a-icon type="delete" @click="deleteSceneCaseStepById"/></span>
            <!--历史记录查看详情使用-->
            <span v-if="step.hasOwnProperty('interfaceType')">
            <span>Step{{index + 1}}   {{step.testpoint}}  <span style="float: right">运行结果：<a-icon v-if="step.result === 'T'" type="check" style="color: green"/><a-icon v-else type="close" style="color: red"/></span></span>
          </span>
            <span v-if="step.sceneStepType === '条件' && step.hasOwnProperty('sceneCaseStepResult')">Step{{index + 1}}  If
            <a-input style="width: 10%" v-model="step.sceneFirstExpression" @click="handleFirstExpressionChange($event, step)"></a-input>
            <a-select style="width: 10%" v-decorator="['sceneExpressionJudgeCondition',{ initialValue: step.sceneExpressionJudgeCondition, rules: [{message: 'Please select your gender!' }] },]" placeholder="Select a option and change input text above" @change="handleSelectChange($event, step)">
              <a-select-option v-for="item in stepResultVerifyList" :value="item" :key="item">
                {{item}}
              </a-select-option>
            </a-select>
            <a-input style="width: 10%" v-model="step.sceneSecondExpression" @click="handleSecondExpressionChange($event, step)"></a-input>
            <span>(1 = 01)</span>
            <span style="float: right">判断结果：<a-icon v-if="step.sceneCaseStepResult === 'T'" type="check" style="color: green"/><a-icon v-else type="close" style="color: red"/></span>
          </span>
            <span v-if="step.sceneStepType === '等待'">Step{{index + 1}} 等待 <a-input style="width: 10%" v-model="step.sceneStepWaitingtime" @click="handleWaitTimeChange($event, step)"></a-input> 毫秒</span>
          </span>
          <!--折叠面板内容-->
          <!--编辑页面使用-->
          <div v-if="step.sceneStepType === 'GET请求' && !step.hasOwnProperty('sceneCaseStepResult')">
            <a-input v-model="step.sceneStepGetUrl" @click="handleGetUrlChange($event, step)"></a-input>
            <br/>
            <scene-case-step-get-request ref="sceneCaseStepGetRequestObj" @fromSceneCaseStepGetRequest="fromSceneCaseStepGetRequest(step, $event)"/>
          </div>
          <!--历史记录查看详情使用-->
          <div v-if="step.hasOwnProperty('interfaceType')">
            <interface-case-debug-common-details ref="interfaceCaseDebugCommonDetailsObj" :caseTotalData="step"/>
          </div>
          <div v-if="step.sceneStepType === 'GET请求' && step.hasOwnProperty('sceneCaseStepResult')">
            <interface-case-debug-common-details ref="interfaceCaseDebugCommonDetailsObj" :caseTotalData="step"/>
          </div>
        </a-collapse-panel>
      </a-collapse>
  </div>
</template>

拖动开始时触发的方法如下，主要作用是向父组件传递了正在拖动的元素的数据信息

dragStart (e, step, index) {
  console.log('dragStart e', e)
  // e.dataTransfer.setData('my-info', 'hello')
  // e.dataTransfer.setData('my-extra-info', 'world')
  this.$emit('fromSceneCaseCommonStepsPage', step)
 },

2.2 父组件

@dragover.prevent 必须加

<div style="margin: 8px">
   <a-timeline>
       <a-timeline-item v-for="(step, index) in steps" :key="index" @drop="drop($event, step)" @dragover.prevent>
          <scene-case-common-steps-page :step="step" :index="index" @fromSceneCaseCommonStepsPage="fromSceneCaseCommonStepsPage"/>
       </a-timeline-item>
   </a-timeline>
</div>

子组件将数据传递给了父组件中的对象

    fromSceneCaseCommonStepsPage (data) {
      this.dragging = data
    },

drop释放鼠标时触发，该方法主要实现了元素位置互换的功能

   drop (e, step) {
      console.log('drop', e)
      // console.log(e.dataTransfer.getData('my-info'))
      // console.log(e.dataTransfer.getData('my-extra-info'))
      e.dataTransfer.dropEffect = 'move'

      if (step === this.dragging) {
        return
      }
      const newItems = [...this.steps]
      const from = newItems.indexOf(this.dragging)
      const to = newItems.indexOf(step)
      newItems[from] = step
      newItems[to] = this.dragging
      this.steps = newItems
    },