一、H5原生的drag&drop
- draggable = true（必須）
- ondragstart：ドラッグ開始時にトリガーされます
- ondrag：ドラッグ中にトリガーされます
- ondragend：ドラッグが終了したときにトリガーします
- ondragenter：ドラッグされた要素がターゲット領域に入るとトリガーされます
- ondragover：ドラッグされた要素がターゲット領域を移動したときにトリガーされます
- ondragleave：ドラッグされた要素がターゲット領域を離れたときにトリガーされます
- オンドロップ：マウスを離したときにトリガーされます
2.実例
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 (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
},