H5利用drag拖拽元素的时候出现禁止符号

1.将拖拽经过的容器加上处理的dragover和gragenter事件的方法

  <div
    class="workspace-page"
    @dragover="handleDragOverAndEnter"
    @dragenter="handleDragOverAndEnter"
  >

​
const handleDragOverAndEnter = (e: DragEvent) => {
  if (!e.dataTransfer) return
  e.dataTransfer.dropEffect = 'move'
  e.preventDefault()
  e.stopPropagation()
}

​

 表示经过的元素允许你要拖拽的元素移动

2.想要移除或修改拖拽默认的元素或图片效果

为要拖拽的元素绑定上dragstart事件

      <div
        class="drag-border-right"
        draggable="true"
        @dragstart="handleDragStart"
        @drag="handleDrag"
      ></div>

然后自定义拖拽的图片 

const handleDragStart = (e: DragEvent) => {
  e.dataTransfer?.setDragImage(new Image(), 0, 0)
}