首页 > 代码库 > HTML 学习笔记 (drag & drop)
HTML 学习笔记 (drag & drop)
拖放(Drag & Drop)是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。过去,我们用监听鼠标的Mousedown、Mouseove、Mouseup等事件来不停地获取鼠标的坐标来修改元素的位置,而现在html5原生的Drag &Drop事件(DnD),方便了许多,而且性能也有了提高。
如何使对象能够被拖动
为了使元素能够被拖动 需把要拖动元素的draggable 属性设置为true。
<img src="../img/0.jpg" draggable="true" id="image"/>
注意:在大多数浏览器中,a元素和img元素默认就是可以拖放的,但是为了保险起见,最好还是加上draggable属性。
拖动时触发的事件
dragstart:网页元素开始拖动时触发
drag:被拖动的元素在拖动过程中持续触发
dragenter:被拖动的元素进入目标元素时触发。应该在目标元素监听此事件。
dragleave:别拖动的元素离开目标元素时触发,应该在目标元素中监听该方法。
dragover:被拖动的元素停留在目标元素中时持续触发,应该在目标元素中监听该方法。
drap:被拖动元素或从文件系统选中的文件,拖放落下时触发。
dragend:网页元素拖动结束时触发。
注意:以上这些事件都可以指定回调函数。
dataTransfer 对象
拖动过程中,回调函数接受的事件参数,有一个dataTransfer属性。它指向一个对象,包含了与拖动相关的各种信息。
event.dataTransfer.setData(biaozhi,event.target.id);
draggableElement.addEventListener(‘dragstart‘, function(event) {
event.dataTransfer.setData(‘text‘, ‘Helloweba‘);
});
上面代码在拖动开始时,在dataTransfer对象上储存一条文本信息,内容为“Helloweba”。当拖放结束时,可以用getData方法取出这条信息。
dataTransfer对象的属性:
effectAllowed:指定所允许的操作,可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized(默认值,等同于all,即允许一切操作)。
files:包含一个FileList对象,表示拖放所涉及的文件,主要用于处理从文件系统拖入浏览器的文件。
types:储存在DataTransfer对象的数据的类型。
dataTransfer对象的方法:
setData(format, data):在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型,比如text、url、text/html等
getData(format):从dataTransfer对象取出数据。
clearData(format):清除dataTransfer对象所储存的数据。如果指定了format参数,则只清除该格式的数据,否则清除所有数据。
setDragImage(imgElement, x, y):指定拖动过程中显示的图像。默认情况下,许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素,而不是指向图像的路径,参数x和y表示图像相对于鼠标的位置。
dataTransfer对象允许在其上存储数据,这使得在被拖动元素与目标元素之间传送信息成为可能。
实例代码 在两个div之间拖动元素
实现拖放的过程
1.设置元素可拖放,即把draggable属性设置为true
2.拖动什么 ondragstart 和 setData()
image.ondragstart = function(event) {
event.dataTransfer.setData(biaozhi,event.target.id);
}
image为可拖动的元素
3.放到何处-ondargover (ondragover事件规定在何处放置被拖动的数据。默认地无法将数据/元素放置到其他元素中。如果要允许放置,必须阻止默认的处理方式。这里通过调用ondragover事件的event.preventDefault()方法:)
box1Div.ondragover = function(event) {
event.preventDefault();
}
4.进行放置
当放置被拖拽数据时会发生drop事件,例:
function dropeImage(event) {
event.preventDefault();
//从dataTransfer中取出包装好的数据 放在目标元素中
var data = http://www.mamicode.com/event.dataTransfer.getData(biaozhi);>
完整例子(元素在两个div之间进行拖放)
HTML 代码
<html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/drapAnddrop.js"></script> <style type="text/css"> .box { width: 400px; height: 400px; border: 1px solid orange; } #box1 { background: darkgray; } </style> </head> <body> <div id="box1" class="box"></div> <div id="box2" class="box"> <img src="../img/0.jpg" draggable="true" id="image"/> </div> </body> </html>
Js代码
var box1Div;
var box2Div ,image;
var biaozhi = "text";
window.onload = function() {
box1Div = document.getElementById("box1");
box2Div = document.getElementById("box2");
image = document.getElementById("image");
//设置数据格式,就是包装要传递的数据在dataTransfer中
image.ondragstart = function(event) {
event.dataTransfer.setData(biaozhi,event.target.id);
}
//放置结束
box1Div.ondragover = function(event) {
event.preventDefault();
}
box2Div.ondragover = function (event) {
event.preventDefault();
}
//进行放置
box1Div.ondrop = dropeImage;
box2Div.ondrop = dropeImage;
}
function dropeImage(event) {
event.preventDefault();
//从dataTransfer中取出包装好的数据 放在目标元素中
var data = http://www.mamicode.com/event.dataTransfer.getData(biaozhi);>
下面一段代码 是拖放本地文件进入网页中(本例子是拖放桌面上的一张图片进入网页元素)
HTML 代码
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #imageContainer { width: 500px; height: 500px; background: darkgray; } </style> <script src="../js/locationDrap.js"></script> </head> <body> <div id="imageContainer"></div> <div id="msgId"> </div> </body> </html>
Js 代码
var imageContainer; window.onload = function () { imageContainer = document.getElementById("imageContainer"); imageContainer.ondragover = function(event) { event.preventDefault(); } imageContainer.ondrop = function(event) { event.preventDefault(); // shouObj(event.dataTransfer.files); var f = event.dataTransfer.files[0]; var fileReader = new FileReader(); fileReader.onload = function(event) { // shouObj(event.target); imageContainer.innerHTML = "<img src=\"" + fileReader.result +"\" />" } fileReader.readAsDataURL(f); } } function shouObj(obj) { var s = ""; for (var k in obj) { s += k + ":" + obj[k] + "<br />"; } document.getElementById("msgId").innerHTML = s; }
其中fileReader.result 就是经过加密的图片文件。
HTML 学习笔记 (drag & drop)