vue 拖拽功能样式优化

拖拽需求完成之后 发现拖拽的过程中很丑 放下的时候光标处也是禁止

虽然说功能不影响 但是用户体验还是不太好 不够专业

所以请做以下优化

1. 把需要拖拽的图标加上可拖拽属性

<div draggable="true">需要拖拽的元素</div>

draggable="true"

2. 在目标元素上添加ondragover事件(拖拽某元素在目标元素上移动时触发,这个事件对象是目标元素)

我使用的是vue所以添加

<canvas @dragover="allowDrop($event)"></canvas>

@dragover="allowDrop($event)" // vue
ondragover="allowDrop(event)" // 原生JS

allowDrop方法用来实现阻止默认时事件

// vue
allowDrop (e) {
    e.preventDefault();
}

// 原生JS
allowDrop (e) {
    e.preventDefault();
}

这样按下鼠标拖拽到目标元素上之后   鼠标就没有那个违停标志了 hhh