[练习]JS鼠标拖拽(DnD)操作

最新推荐文章于 2024-02-01 16:03:13 发布

转载最新推荐文章于 2024-02-01 16:03:13 发布 · 636 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000004191318

本文介绍如何利用HTML5的拖放(Drag and Drop)功能及File API实现在网页中拖拽图片并预览的功能。文章提供了一个简单示例，展示了如何监听拖放事件、读取文件内容并将其显示在页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拖放（Drag and Drop，DnD）操作因为涉及到与底层OS的结合，所以是较为复杂的交互操作。这里先实现一个简单的拖拽图片到浏览器显示到操作，主要用到了HTML5中的FileAPI：

先上DEMO
DnD demo

需要注意的是浏览器通过取消相应的拖拽事件来表明它对该事件有兴趣，比如通过取消dragover来表明浏览器已经做好准备接受进一步的拖拽，接着说dragend最后到drop，drop事件发生时，就可以使用HTML5新的文件API也就是FileAPI进行数据交互，具体见本栗代码?
代码：

HTML

 <div id="holder"></div> 
<p id="status">File API可用</p>
<p>鼠标拖拽图片放入框中</p>

CSS

#holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
#holder.hover { border: 10px dashed #333; }
p {text-align:center;}

var holder = document.getElementById('holder'),
    state = document.getElementById('status');
if (typeof window.FileReader === 'undefined') {
  state.className = 'fail';
} else {
 state.className = 'success';
  state.innerHTML = 'File API可用';
} 
 
holder.ondragover = function () {
 
 this.className = 'hover';
 console.log('dragover'); return false;
};
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
  //console.log(e)
  this.className = '';
  e.preventDefault();

  var file = e.dataTransfer.files[0],
      reader = new FileReader();
  reader.onload = function (event) {
    console.log(event.target);
    holder.style.background = 'url(' + event.target.result + ') no-repeat center';
  };
  console.log(file);
  reader.readAsDataURL(file);

  return false;
};