文章目录
- 文章参考
- 前言
- 实现拖放的步骤：
- 步骤1：创建一个可拖拽对象：
- 步骤2：放置对象：
- 案例
- 拖放的相关事件：
- DataTransfer对象的属性与方法
- DataTransfer对象的属性：
- 方法 描述
- HTML5——将图片拖拽上传
- js原生拖拽事件（HTML5的拖放 API）
前言
在HTML5之前，如果要实现拖放效果，一般会使用mousedown、mousemove和mouseup三个事件进行组合来模拟出拖拽效果，比较麻烦。而HTML5规范实现了原生拖放功能，使得元素拖放的实现更加方便和高效。
默认情况下，图像、链接和文本是可以拖动的。文本只有在被选中的情况下才能拖动，而图像和链接在任何时候都可以拖动。
HTML5为所有的HTML元素规定了一个draggable属性，表示元素是否允许拖动。要想让其他元素也能被拖动，可以设置这个属性为true。
实现拖放的步骤：
步骤1：创建一个可拖拽对象：
- 如果想要拖动某个元素，需要设置元素的 draggable 属性为 true。
<img id="dragImg" draggable="true" />给 dragstart 设置一个事件监听器存储拖拽数据。
document.getElementById("dragImg").addEventListener("dragstart", function(event) {
// 存储拖拽数据和拖拽效果...
event.dataTransfer.setData("Text",ev.target.id);// 这里只能是字符串
}, false);步骤2：放置对象：
假设放置对象的DOM为：
<div id="dragTarget"></div>- dragenter事件，用来确定放置目标是否接受放置。如果放置被接受，那么这个事件必须取消。
document.getElementById("dragTarget").addEventListener("dragenter", function(event) {
// 阻止浏览器默认事件
event.preventDefault();
}, false);- dragover事件，用来确定给用户显示怎样的反馈信息。
如果这个事件被取消，反馈信息（通常就是光标）就会基于 dropEffect 属性的值更新。
document.getElementById("dragTarget").addEventListener("dragover", function(event) {
// 阻止浏览器默认事件
event.preventDefault();
}, false);- 最后是drop事件，允许放置对象。
document.getElementById("dragTarget").addEventListener("drop", function(event) {
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}, false);案例
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#dragTarget {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>请把 W3School 的图片拖放到矩形中：</p>
<div id="dragTarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
</body>
</html>拖放的相关事件：
事件 | 产生事件的元素 | 描述 |
dragstart | 被拖放的元素 | 开始拖放操作 |
drag | 被拖放的元素 | 拖放过程中 |
dragenter | 拖放过程中鼠标经过的元素 | 被拖放元素开始进入本元素的范围内 |
dragover | 拖放过程中鼠标经过的元素 | 被拖放元素正在本元素范围内移动 |
dragleave | 拖放过程中鼠标经过的元素 | 被拖放元素离开本元素的范围 |
drop | 拖放的目标元素 | 有其他元素被拖放到本元素中 |
dragend | 拖放的对象元素 | 拖放操作结束 |
DataTransfer对象的属性与方法
DataTransfer对象的属性：
属性 | 描述 |
dropEffect | 表示拖放操作的视觉效果，允许对其进行值的设定。该效果必须在用effectAllowed属性指定的允许的视觉效果范围内，允许指定的值有：none、copy、link、move。 |
effectAllowed | 用来指定当元素被拖放时所允许的视觉效果。可以指定的值有：none、copy、copyLink、copyMove、link、linkMove、all、uninitialize。 |
files | 返回表示被拖拽文件的 FileList。 |
types | 存入数据的MIME类型。如果任意文件被拖拽，那么其中一个类型将会是字符串”Files”。 |
方法 描述
方法 | 描述 |
void setData(DOMString format, DOMString data) | 向DataTransfer对象存入数据。 |
DOMString getData(DOMString data) | 读取DataTransfer对象中的数据。 |
void clearData(DOMString format) | 清除DataTransfer对象中的数据。如果省略参数format，则清除全部数据。 |
void setDragImage(Element image, long x, long y) | 用img元素来设置拖放图标。 |
HTML5——将图片拖拽上传
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
<script type="text/javascript">
window.onload = function () {
var div1 = document.getElementById("div1");
div1.ondragenter = function () {
this.innerHTML = "可以释放了";
}
div1.ondragover = function (ev) {
ev.preventDefault();
}
div1.ondragleave = function () {
this.innerHTML = "将文件拖拽到此区域";
}
div1.ondrop = function (ev) {
ev.preventDefault();
var files = ev.dataTransfer.files;
var fd = new FileReader();
if (files[0].type.indexOf('image') != -1) {
fd.readAsDataURL(files[0]);
var ul1 = document.getElementById("ul1");
fd.onload = function () {
var li1 = document.createElement("li");
var img1 = document.createElement("img");
img1.src = this.result;
li1.appendChild(img1);
ul1.appendChild(li1);
}
} else { alert("请选择图片上传"); }
}
// alert(files.length);
}
</script>
</head>
<body>
<div id="div1">将文件拖拽到此区域</div>
<ul id="ul1">
</ul>
</body>
</html>
