Skip to main content

调用 h5 的拖放 api

H5 的拖放 api​

拖拽事件的定义和用法​

ondragover 事件在可拖动元素或选取的文本正在拖动到放置目标时触发。

默认情况下，数据/元素 不能放置到 其他元素 中。 如果要实现改功能， 我们需要防止元素的默认处理方法。

我们可以通过调用 event.preventDefault() 方法来实现 ondragover 事件。

注意

为了让元素可拖动，需要使用 HTML5draggable 属性。

提示

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

在拖放的过程中会触发以下事件​

  • 在拖动目标上触发事件 (源元素):

    • ondragstart - 用户开始拖动元素时触发
    • ondrag - 元素正在拖动时触发
    • ondragend - 用户完成元素拖动后触发

  • 释放目标时触发的事件:

    • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
    • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
    • ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
注意

在拖动元素时，每隔 350 毫秒会触发 ondragover 事件。

拖放打开文件​

const fs = require('fs');
const content = document.querySelector('#content');
content.ondragenter = content.ondragover = content.ondragleave = function() {
  return false; /*阻止默认行为*/
}
content.ondrop = function(e) {
  //阻止默认行为
  e.preventDefault();
  const path = e.dataTransfer.files[0].path;
  fs.readFile(path, 'utf-8', (err, data) => {
    if (err) {
      console.log(err);
      return false;
    }
    content.innerHTML = data;
  })
}