有关拖放的操作
我们鼠标选择文件的过程中，如何用鼠标把文件拖放进入我们的页面呢？我们需要那些事件。获取那些内容呢？
这里是效果图。
<!DOCTYPE html>
<html lang="zh-CN">
<meta charset="UTF-8">
<title>拖放操作</title>
<meta name="author" content="汪磊">
<link rel="stylesheet" href="bootstrap.css">
<style>
#target {
padding: 20px;
height: 300px;
border: 5px dashed #c0c0c0;
color: #e0e0e0;
font-size: 40px;
line-height: 260px;
text-align: center;
-webkit-user-select: none;
cursor: pointer;
}
#target.actived {
border-color: #888;
color: #eaeaea;
box-shadow: 0 0 80px #e0e0e0 inset;
}
</style>
</head>
<body>
<!--这是从bootstap之中 插入的代码 所以我们不需要设置样式-->
<div class="container">
<div class="page-header">
<h1>Drag&Drop</h1></div>
<div class="jumbotron">
<p>你好啊，你今年几岁啊，哈哈，我的今天在哪里</p>
<img src="toy.png" alt="">
</div>
<div id="target">
Drag something into here
<ul id="result" class="list-group"></ul>
</div>
<br>
</div>
/如果想获得事件需要阻止事件的默认行为 如果不阻止浏览器的默认行为是无法执行 drag事件的。我们首先需要分析的是拖入的文件类型有哪些？首先是文字 图片 文件 对于不同的类型我们获取的方式不一样。我们在控制台打印e 可以获得的属性中，对于文字的拖放的函数是 e.dateTansfer.getDate("text/pain"); 而对于图片的获取是 通过 e.dateTransfer.getDate("text/url-list");*/
(function() {
// 找到目标位置框框
var target = document.querySelector('#target');
var fileList = document.querySelector('#result');
// 注册拖拽进入
target.addEventListener('dragenter', function() {
this.classList.add('actived');
});
// 离开
target.addEventListener('dragleave', function() {
this.classList.remove('actived');
});
// 如果想要捕获drop事件 就一定得在该事件中阻止默认事件 阻止事件冒泡
target.addEventListener('dragover', function(e) {
e.preventDefault();
e.stopPropagation();
});
// 当元素放到该对象上
target.addEventListener('drop', function(e) {
if (e.dataTransfer.files.length) {
var files = e.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
var li = document.createElement('li');
li.setAttribute('class', 'list-group-item');
// 创建信息的子节点
li.innerHTML = '<h5 class="list-group-item-heading">' + files[i].name + '</h5><p class="list-group-item-text">' + files[i].lastModifiedDate.toLocaleDateString() + ' ' + files[i].lastModifiedDate.toLocaleTimeString() + ' ' + (files[i].size / 1024).toFixed(2) + 'KB</p>';
fileList.appendChild(li);
}
} else {
// 短路运算
// var data = e.dataTransfer.getData('text/plain') || e.dataTransfer.getData('text/uri-list');
var data = e.dataTransfer.getData('text/plain');
if (data) {
// 拖入的是文本
target.innerHTML = data;
} else {
var img = document.createElement('img');
img.src = e.dataTransfer.getData('text/uri-list');
target.appendChild(img);
}
}
this.classList.remove('actived');
e.preventDefault();
e.stopPropagation();
});
})();
</script>
</body>
</html>