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

朴灿烈づ我的快乐病毒、 2022-10-30 06:30 328阅读 0赞

## 一、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 必须加

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

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
        },