HTML5- 拖放操作

8. 拖放操作

8.1. 网页内元素拖放

• 拖放是 HTML5 中非常常见的功能
• 我们可以通过在元素上添加draggable="true"属性实现元素允许被拖拽

提示：链接和图片默认是可拖动的，不需要 draggable 属性。

• ondrag 事件在元素或者选取的文本被拖动时触发。
• 在拖放的过程中会触发以下事件：
  • 在拖动目标上触发事件 (源元素):
    • ondragstart - 用户开始拖动元素时触发
    • ondrag - 元素正在拖动时触发
    • ondragend - 用户完成元素拖动后触发
  • 释放目标时触发的事件（目标元素）:
    • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
    • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
    • ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

注意： 在拖动元素时，每隔 350 毫秒会触发 ondrag 事件。

8.2. 拖拽删除效果

8.3. 桌面文件拖拽至网页

// 找到目标位置框框
var target = document.querySelector('#target');
var fileList = document.querySelector('#result');
// 注册拖拽进入
target.addEventListener('dragenter', function() {
   
    this.classList.add('actived');