如何实现拖拽上传

如何实现拖拽?

1、为要实现拖拽的元素添加属性 draggable="ture"

<div class="dragBox" draggable="ture"></div>

2、js拖拽相关事件

被拖拽元素事件:

  • ondragstart 拖拽开始的时触发 (触发一次)
  • ondrag 连续触发拖拽事件
  • ondragend 拖拽结束触发 (触发一次)

拖拽进入的目标元素的事件:

  • ondragenter 鼠标进入目标元素内触发 (触发一次)
  • ondragover 鼠标在目标元素内持续触发
  • ondragleave 鼠标离开目标元素时触发事件 (触发一次)
  • ondrop 鼠标在目标元素上抬起时触发 (触发一次)
const dragBox = document.querySelector('.dragBox');
dragBox.ondragStart = function(){
    this.innerHTML ='1'
}
View Code

猜你喜欢

转载自www.cnblogs.com/chengl062/p/11487454.html