前端实现元素可拖拽实战，vue

//  设置元素可拖拽
<div
  @click="clickImageItemHandler()"
  :draggable="true"
  @dragstart="dragstartHandler"
  @dragend="dragendHandler"
  :class="isSelected ? 'active' : ''"
>
</div>

// 获取浏览器可视窗口的宽度
getClientWidth() {
  let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  return width;
},

dragstartHandler(e) {
  // 记录被拖拽的数据
  // e.dataTransfer.setData("myInfo", JSON.stringify(this.result));
},
dragendHandler(e) {
  let clientWidth = this.getClientWidth();
  let clientX = e.clientX;
  let width = parseInt(clientWidth / 2) + 200;
  // 判断拖动目标位置决定放置左半部分或右半部分
  if (width > clientX && clientX > 400) {
    // 左半部分
  } else if (width < clientX) {
    // 右半部分
  }
},

元素已经可以拖动了，但会显示一个禁止的图标，这是因为没有可放置的区域。
创建一个区域 只需要在标签上添加 ondragover 和 ondrop 方法即可，表示这个区域可放置并进行处理。

<!-- 要使@drop事件在vue中生效需要阻止@dragover默认事件 -->
// leftWmtsInfo、rightWmtsInfo拖入的数据
<template>
  <image-item
    v-if="leftWmtsInfo"
    :result="leftWmtsInfo"
    class="results-item-left"
    @delete="deleteHandler('left')"
  />
  <div
    v-else
    class="page-box page-left"
    @dragover="dragoverHandler"
    @drop="dropLeftHandler"
    :class="leftWmtsInfo ? 'active' : ''"
  >
    <div class="operat-tips-box">
      <wb-icon class="image-icon" icon="image-icon" />
      <span>拖入要对比的影像</span>
    </div>
  </div>
</template>
<template>
  <image-item
    v-if="rightWmtsInfo"
    :result="rightWmtsInfo"
    class="results-item-right"
    @delete="deleteHandler('right')"
  />
  <div class="page-box page-right" @dragover="dragoverHandler" @drop="dropRightHandler" v-else>
    <div class="operat-tips-box">
      <wb-icon class="image-icon" icon="image-icon" />
      <span>拖入要对比的影像</span>
    </div>
  </div>
</template>

dragoverHandler(e) {
  // 放置位置 - 阻止默认事件
  e.preventDefault();
},
dropLeftHandler(e) {
  // let data = JSON.parse(e.dataTransfer.getData("myInfo"));
  // this.setLeftWmtsInfo(data);
  // console.log(this.leftWmtsInfo, "-----left---------------");
},
dropRightHandler(e) {
  // let data = JSON.parse(e.dataTransfer.getData("myInfo"));
  // this.setRightWmtsInfo(data);
  // console.log("-----right---------------");
},