h5 拖放 | Filereader | 音频、视频 | 地理信息

时间 2019-12-08

标签 h5 拖放 filereader 音频视频地理信息繁體版

原文原文链接

拖放 drag

在标签中添加draggable="true"，标签便可拖动。html

七个事件

1.ondragstart 拖放开始
2.ondrag 拖放中
3.ondragend 拖放结束
4.ondragenter 拖拽其余元素进入绑定事件的元素（从鼠标进入算进入）
5.ondragover 拖拽其余元素进入绑定事件的元素后（持续发生，同ondrag）
6.ondragleave 拖拽其余元素离开绑定事件的元素（从鼠标离开算离开）
7.ondrog 拖拽其余元素到绑定事件的元素中松开
数组

看完上面gif图的有没有发现，前三个事件都触发了，为啥第四个事件，drop 不会触发呢？为何在黑框里面放置红方块不会触发，在外面放置也不会触发？
这是由于，ondragover这个事件有一个默认行为，在 ondragover的最后默认被拖拽的元素回到原位（我是这么理解的），这样就解释了，在被绑定元素中松开了拖拽元素，没有触发ondrog而是触发了ondragleave。
若是你想完成的操做是，把红色的块放到咱们绑定事件的盒子中松开从而触发事件ondrog，那么就阻止ondragover的默认行为
box.ondragover = function(e){
e.preventDefault();
console.log('over');
}
这样就能够触发ondrog。
同时，阻止了ondragover的默认行为后，把红色的块放到咱们绑定事件的盒子中松开这个操做再也不触发ondragleave，只触发ondrog。
更多参考： www.cnblogs.com/yanggeng/p/…