美文网首页
最简单的html5文件拖放示例

最简单的html5文件拖放示例

作者: 奥尼酱 | 来源:发表于2016-11-07 20:52 被阅读0次

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  #output, #droptarget {
    height: 200px;
    background: lightblue;
  }
  </style>
</head>
<body>
  <div id="droptarget"></div>
  <script src="./app.js"></script>
</body>
</html>
var droptarget = document.getElementById('droptarget');

function handleEvent(event) {
    event.preventDefault();
    if (event.type === 'drop') {
      event.preventDefault();
      files = event.dataTransfer.files;
      console.log(files);
    }
}
droptarget.addEventListener('dragover', handleEvent);
droptarget.addEventListener('drop', handleEvent);

相关文章

  • 最简单的html5文件拖放示例

    示例代码:

  • 控件拖拽

    JavaScript实现最简单的拖拽效果 HTML5 drag & drop 拖拽与拖放简介 基于HTML5 dr...

  • HTML5 拖放笔记

    HTML5拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分。 拖放 拖...

  • HTML5 之 Drag

    拖放事件 HTML4 通过mousedown mousemove mouseup 来实现拖放 HTML5 拖放事件...

  • HTML5拖放

    1、HTML5 拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分。 拖...

  • HTML5 拖放(Drag 和 Drop)

    HTML5 拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分。 将w3...

  • HTML5拖放API附带示例

    拖放(Drag 和 drop)是HTML5标准的组成部分 拖放 拖放是一种常见的特性,即抓取对象以后拖放到其他位置...

  • h5图片拖放功能

    首先什么是html5拖放? 答:html5拖放是h5标准的组成部分 拖动开始: ondrapstart:调用一个函...

  • ReactDnD单一目标(例子)

    这是最简单的拖放示例。 拖动下面的框并将它们放入垃圾箱。 请注意,它具有正常、活动和悬停状态。 拖动的项目本身会在...

  • HTML5中的图片拖放

    拖放函数: 1.HTML5拖放 Drag拖和drop放是HTML5标准的组成成分 2.拖放开始: ondragst...

网友评论

      本文标题:最简单的html5文件拖放示例

      本文链接:https://www.haomeiwen.com/subject/ipnouttx.html