拖拉事件

拖拉指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里。

拖拉的对象有好几种,包括Element节点、图片、链接、选中的文字等等。在HTML网页中,除了Element节点默认不可以拖拉,其他(图片、链接、选中的文字)都是可以直接拖拉的。为了让Element节点可拖拉,可以将该节点的draggable属性设为true。

<div draggable="true">
此区域可拖拉
</div>

draggable属性可用于任何Element节点,但是图片(img元素)和链接(a元素)不加这个属性,就可以拖拉。对于它们,用到这个属性的时候,往往是将其设为false,防止拖拉。

注意,一旦某个Element节点的draggable属性设为true,就无法再用鼠标选中该节点内部的文字或子节点了。

事件种类

当Element节点或选中的文本被拖拉时,就会持续触发拖拉事件,包括以下一些事件。

<div ondragover="return false">
<div ondragover="event.preventDefault()">

  

上面代码中,如果不取消拖拉事件或者阻止默认行为,就不可能在div节点上drop被拖拉的节点。

拖拉事件用一个DragEvent对象表示,该对象继承MouseEvent对象,因此也就继承了UIEvent和Event对象。DragEvent对象只有一个独有的属性DataTransfer,其他都是继承的属性。DataTransfer属性用来读写拖拉事件中传输的数据,详见下文《DataTransfer对象》的部分。

下面的例子展示,如何动态改变被拖动节点的背景色。

div.addEventListener("dragstart", function(e) {
this.style.backgroundColor = "red";
}, false);
div.addEventListener("dragend", function(e) {
this.style.backgroundColor = "green";
}, false);

  

上面代码中,div节点被拖动时,背景色会变为红色,拖动结束,又变回绿色。

下面是一个例子,显示如何实现将一个节点从当前父节点,拖拉到另一个父节点中。

/ HTML代码为
// <div class="dropzone">
// <div id="draggable" draggable="true">
// 该节点可拖拉
// </div>
// </div>
// <div class="dropzone"></div>
// <div class="dropzone"></div>
// <div class="dropzone"></div> // 被拖拉节点
var dragged; document.addEventListener("dragstart", function( event ) {
// 保存被拖拉节点
dragged = event.target;
// 被拖拉节点的背景色变透明
event.target.style.opacity = .5;
}, false); document.addEventListener("dragend", function( event ) {
// 被拖拉节点的背景色恢复正常
event.target.style.opacity = "";
}, false); document.addEventListener("dragover", function( event ) {
// 防止拖拉效果被重置,允许被拖拉的节点放入目标节点
event.preventDefault();
}, false); document.addEventListener("dragenter", function( event ) {
// 目标节点的背景色变紫色
// 由于该事件会冒泡,所以要过滤节点
if ( event.target.className == "dropzone" ) {
event.target.style.background = "purple";
}
}, false); document.addEventListener("dragleave", function( event ) {
// 目标节点的背景色恢复原样
if ( event.target.className == "dropzone" ) {
event.target.style.background = "";
}
}, false); document.addEventListener("drop", function( event ) {
// 防止事件默认行为(比如某些Elment节点上可以打开链接)
event.preventDefault();
if ( event.target.className == "dropzone" ) {
// 恢复目标节点背景色
event.target.style.background = "";
// 将被拖拉节点插入目标节点
dragged.parentNode.removeChild( dragged );
event.target.appendChild( dragged );
}
}, false);

  

DataTransfer对象概述

所有的拖拉事件都有一个dataTransfer属性,用来保存需要传递的数据。这个属性的值是一个DataTransfer对象。

拖拉的数据保存两方面的数据:数据的种类(又称格式)和数据的值。数据的种类是一个MIME字符串,比如 text/plain或者image/jpeg,数据的值是一个字符串。一般来说,如果拖拉一段文本,则数据默认就是那段文本;如果拖拉一个链接,则数据默认就是链接的URL。

当拖拉事件开始的时候,可以提供数据类型和数据值;在拖拉过程中,通过dragenter和dragover事件的监听函数,检查数据类型,以确定是否允许放下(drop)被拖拉的对象。比如,在只允许放下链接的区域,检查拖拉的数据类型是否为text/uri-list。

发生drop事件时,监听函数取出拖拉的数据,对其进行处理。

DataTransfer对象的方法

DataTransfer对象有以下方法。

(1)setData()

setData方法用来设置事件所带有的指定类型的数据。它接受两个参数,第一个是数据类型,第二个是具体数据。如果指定的类型在现有数据中不存在,则该类型将写入types属性;如果已经存在,在该类型的现有数据将被替换。

event.dataTransfer.setData("text/plain", "Text to drag");

  

上面代码为事件加入纯文本格式的数据。

如果拖拉文本框或者拖拉选中的文本,会默认将文本数据添加到dataTransfer属性,不用手动指定。

<div draggable="true" ondragstart="
event.dataTransfer.setData('text/plain', 'bbb')">
aaa
</div>

  

上面代码中,拖拉数据实际上是bbb,而不是aaa。

下面是添加其他类型的数据。由于text/plain是最普遍支持的格式,为了保证兼容性,建议最后总是将数据保存一份纯文本的格式。

var dt = event.dataTransfer;

// 添加链接
dt.setData("text/uri-list", "http://www.example.com");
dt.setData("text/plain", "http://www.example.com");
// 添加HTML代码
dt.setData("text/html", "Hello there, <strong>stranger</strong>");
dt.setData("text/plain", "Hello there, <strong>stranger</strong>");
// 添加图像的URL
dt.setData("text/uri-list", imageurl);
dt.setData("text/plain", imageurl);

  可以一次提供多种格式的数据。

var dt = event.dataTransfer;
dt.setData("application/x-bookmark", bookmarkString);
dt.setData("text/uri-list", "http://www.example.com");
dt.setData("text/plain", "http://www.example.com");

  上面代码中,通过在同一个事件上面,存放三种类型的数据,使得拖拉事件可以在不同的对象上面,drop不同的值。注意,第一种格式是一个自定义格式,浏览器默认无法读取,这意味着,只有某个部署了特定代码的节点,才可能drop(读取到)这个数据。

getData()

getData方法接受一个字符串(表示数据类型)作为参数,返回事件所带的指定类型的数据(通常是用setData方法添加的数据)。如果指定类型的数据不存在,则返回空字符串。通常只有drop事件触发后,才能取出数据。如果取出另一个域名存放的数据,将会报错。

下面是一个drop事件的监听函数,用来取出指定类型的数据。

function onDrop(event){
var data = event.dataTransfer.getData("text/plain");
event.target.textContent = data;
event.preventDefault();
}

  

上面代码取出拖拉事件的文本数据,将其替换成当前节点的文本内容。注意,这时还必须取消浏览器的默认行为,因为假如用户拖拉的是一个链接,浏览器默认会在当前窗口打开这个链接。

getData方法返回的是一个字符串,如果其中包含多项数据,就必须手动解析。

function doDrop(event){
var lines = event.dataTransfer.getData("text/uri-list").split("\n");
for (let line of lines) {
let link = document.createElement("a");
link.href = line;
link.textContent = line;
event.target.appendChild(link);
}
event.preventDefault();
}

  

上面代码中,getData方法返回的是一组链接,就必须自行解析。

类型值指定为URL,可以取出第一个有效链接。

var link = event.dataTransfer.getData("URL");

  

clearData()

clearData方法接受一个字符串(表示数据类型)作为参数,删除事件所带的指定类型的数据。如果没有指定类型,则删除所有数据。如果指定类型不存在,则原数据不受影响。

event.dataTransfer.clearData("text/uri-list");

  上面代码清除事件所带的URL数据。

setDragImage()

拖动过程中(dragstart事件触发后),浏览器会显示一张图片跟随鼠标一起移动,表示被拖动的节点。这张图片是自动创造的,通常显示为被拖动节点的外观,不需要自己动手设置。setDragImage方法可以用来自定义这张图片,它接受三个参数,第一个是img图片元素或者canvas元素,如果省略或为null则使用被拖动的节点的外观,第二个和第三个参数为鼠标相对于该图片左上角的横坐标和右坐标。

下面是一个例子。

// HTML代码为
// <div id="drag-with-image" class="dragdemo" draggable="true">
drag me
// </div> var div = document.getElementById("drag-with-image");
div.addEventListener("dragstart", function(e) {
var img = document.createElement("img");
img.src = "http://path/to/img";
e.dataTransfer.setDragImage(img, 0, 0);
}, false);

  

05-04 02:09