lucifinilhades

浏览: 87204 次
性别:
来自: 苏州

最近访客更多访客>>

jorum

xyqck163

zhugeyixun

kuangweidoc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML5 拖放API

博客分类：

HTML5/CSS3

HTML5 Drag Drop

在HTML5中，已经支持在浏览器与其他应用程序之间的数据互相拖动，同时也大大简化了有关于拖放方面的代码。

实现拖放的步骤

在HTML5中要想实现拖放操作，至少要经过两个步骤：

将想要拖放的对象元素的draggable属性设为true（draggable="true"）。这样才能将该元素进行拖放。另外，img元素和a元素（必须指定href属性）默认允许拖放。
编写与拖放有关的事件处理代码。关于拖放存在的几个事件如下所示。

拖放的相关事件

事件	产生事件的元素	描述
dragstart	被拖放的元素。	开始拖放操作。
drag	被拖放的元素。	拖放过程中。
dragenter	拖放过程中鼠标经过的元素。	被拖放的元素开始进入本元素的范围内。
dragover	拖放过程中鼠标经过的元素。	被拖放的元素正在本元素范围内移动。
dragleave	拖放过程中鼠标经过的元素。	被拖放的元素离开本元素的范围。
drop	拖放的目标元素。	有其他元素被拖放到了本元素中。
dragend	拖放的目标元素。	拖放操作结束。

拖放示例如下，为使用方便，为jQuery增加如下函数：

jQuery.fn.dragstart = function(handler) {
	return this.each(function() {
		this.addEventListener("dragstart", handler, false);
	});
};

jQuery.fn.drag = function(handler) {
	return this.each(function() {
		this.addEventListener("drag", handler, false);
	});
};

jQuery.fn.dragenter = function(handler) {
	return this.each(function() {
		this.addEventListener("dragenter", handler, false);
	});
};

jQuery.fn.dragover = function(handler) {
	return this.each(function() {
		this.addEventListener("dragover", handler, false);
	});
};

jQuery.fn.dragleave = function(handler) {
	return this.each(function() {
		this.addEventListener("dragleave", handler, false);
	});
};

jQuery.fn.drop = function(handler) {
	var handler1 = function(event) {
		handler(event);
		event.preventDefault();
		event.stopPropagation();
	};
	return this.each(function() {
		this.addEventListener("drop", handler, false);
	});
};

jQuery.fn.dragend = function(handler) {
	var handler1 = function(event) {
		handler(event);
		event.preventDefault();
	};
	return this.each(function() {
		this.addEventListener("dragend", handler, false);
	});
};

拖放操作所使用的示例HTML页面代码如下：

<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>施放示例</title>
    <script type="text/javascript" src="../js/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="../js/dragdrop.js"></script>
  </head>
  <body>
    <h1>简单拖放示例</h1>
    <div id="dragme" draggable="true" style="width:200px; border:1px solid gray; ">请施放</div>
    <div id="text" style="width:200px; height:200px; border:1px solid gray; "></div>
  </body>
</html>

进行拖放操作的JavaScript代码如下：

$(function() {
 	$(document).dragover(function(event) {
		event.preventDefault();
	});

	$("#dragme").dragstart(function(event) {
		var dt = event.dataTransfer;
		dt.effectAllowed = 'all';
		dt.setData("text/plain", "Hello World.");
	});
	
	$("#text").dragend(function(event) {}).drop(function(event) {
		var dt = event.dataTransfer;
		var text = dt.getData("text/plain");
		$(this).append(text);
	}); 
});

代码要点说明：

开始拖动（dragstart事件发生）时，把要拖动的数据存入DataTransfer对象（setData()方法）。DataTransfer对象专门用来存放拖放时要携带的数据，它可以被设置为拖动事件对象的dataTransfer属性。setData()方法中的第一个参数为携带数据的数据各类的字符串，第二个参数为要携带的数据。第一个参数中表示数据各类的字符串里只能填入类似“text/plain”或“text/html”的表示MIME类型的文字，不能填入其他文字。
如果把“dt.setData("text/plain", "Hello World.")”改为“dt.setData("text/plain", this.id)”，因为把被拖动元素的id当成了参数，所以携带的数据就是被拖动元素中的数据了，因为浏览器在使用getData()方法读取数据时会自动读取该元素中的数据。
针对拖放的目标元素，必须在dragend或dragover事件内调用“event.preventDefault()”方法。因为默认情况下，拖放的目标元素是不允许接受元素的，为了把元素拖放到其中，必须把默认处理关闭。
目标元素接受到被拖放的元素后，执行getData()方法从DataTransfer那里获得数据。getData()方法的参数为setData()方法中指定的数据种类。
要实现拖放过程，还必须在目标元素的drop事件中关闭默认处理（拒绝被拖放），否则目标元素不能接受被拖放的元素。
要实现拖放过程，还必须设定整个页面为不执行默认处理（拒绝被拖放），否则拖放处理也不能被实现。因为页面是先于其他元素接受拖放的，如果页面上拒绝拖放，则页面上其他元素就都不能接受拖放了。
要使用元素可以被拖放，首先必须把该元素的draggable属性设为true。另外，为了让这个示例在所有支持拖放API的浏览器中都能正常运行，需要指定“-webkit-user-drag:element”这种Webkit特有的CSS属性。
本示例中的数据种类使用了“text/plain”这个MIME类型，也可以从其他使用同样MIME类型的应用程序中把该类型的数据拖动到目标元素中。现在支持拖动处理的MIME的类型有：“text/plain（文本文字）”、“text/html（HTML文字）”、“text/xml（XML文字）”、“text/uri-list（URL列表，每个URL为一行）”。

DataTransfer对象的属性与方法

如果DataTransfer对象的属性和方法使用得好，可以实现定制拖放图标，让它只支持特定拖放（例如复制、移动等），甚至可以实现更复杂的拖放操作：

dropEffect属性：表示拖放操作的视觉效果，允许对其进行值的设定。该效果必须在用effectAllowed属性指定的允许的视觉效果的范围内，允许指定的值为none、copy、link、move。
effectAllowed属性：用来指定当元素被拖放时所允许的视觉效果，可以指定的值为：none、copy、copyLink、copyMove、link、linkMove、move、all、unintialize。
type属性：存入数据的种类，字符串的伪数组。
void clearData(DOMString format)方法：清除DataTransfer对象中存放的数据，如果省略参数，则清除全部数据。
void setData(DOMString format, DOMString data)方法：向DataTransfer对象内存入数据。
DOMString getData(DOMString format)方法：从DataTransfer对象中读数据。
void setDragImage(Element image, long x, long y)方法：用img元素来设置拖放图标（部分浏览器中可以用canvas等其他元素来设置）。

setData()方法在拖放开始时向dataTransfer对象中存入数据，它用type属性来指定数据MIME类型，而getData()方法在拖动结束时读取dataTransfer对象中的数据。clearData()方法可以用来清除DataTransfer对象内的数据。

设定拖放时的视觉效果

dropEffect属性与effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示当一个元素被拖动时所允许的视觉效果，一般在ondragstart事件中设定，允许设定的值为none、copy、copyLink、copyMove、link、linkMove、move、all、unintialize。dropEffect属性表示实际拖放时的视觉效果，一般在ondragover事件中指定，允许设定的值为none、copy、link、move。dropEffect属性所表示的实际视觉效果必须在effectAllowed属性所表示的允许的视觉效果范围内。规则如下所示：

如果effectAllowed属性设定为none，则不允许拖放元素。
如果不dropEffect属性设定为none，则不允许被拖放到目标元素中。
如果effectAllowed属性设定为all或不设定，则dropEffect属性允许被设定为任何值，并且按指定的视觉效果进行显示。
如果effectAllowed属性设定为具体效果（不为none、all），dropEffect属性也设定了具体视觉效果，则两个具体效果值必须完全相等，否则不允许将被拖放元素拖放到目标元素中。

$("#dragme").dragstart(function(event) {
    var dt = event.dataTransfer;
    dt.effectAllowed = 'copy';
    dt.setData("text/plain", "Hello.");
});

$("#text").dragover(function(event) {
    var dt = event.dataTransfer;
    dt.dropEffect = 'copy';
    event.preventDefault();
});

自定义拖放图标

除了上面所说的使用effectAllowed属性与dropEffect属性外，HTML5中还允许自定义拖放图标——指的是在用鼠标拖动元素的过程中，位于鼠标指针下部的小图标。

DataTransfer对象有一个setDragImage()方法，该方法有三个参数，第一个参数image设定为拖放图标的图标元素，第二个参数为拖放图标离鼠标指针的x轴方向的位移量，第三个参数是拖放图标离鼠标指针的y轴方向的位移量。

$('#dragme').dragstart(function(event) {
    var dt = event.dataTransfer;
    dt.setDragImage($('img').attr("src", "images/img1.jpg")[0], -10, -10);
    dt.setData("text/plain", "Welcome");
});

分享到：

jQuery 事件模型【2】 | HTML5 文件API

2011-10-17 19:43
浏览 4962
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 拖放API

实现拖放的步骤

DataTransfer对象的属性与方法

设定拖放时的视觉效果

自定义拖放图标

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 拖放API

实现拖放的步骤

DataTransfer对象的属性与方法

设定拖放时的视觉效果

自定义拖放图标

评论

发表评论

相关推荐

使用选择器在页面中插入内容

HTML5 绘制图形【4】

CSS3 选择器【2】

HTML5 绘制图形【3】

CSS3 选择器【1】

HTML5 绘制图形【2】

HTML5 绘制图形【1】

CSS3 模块化结构

HTML5 获取地理位置信息

HTML5 使用Web Worker处理线程

HTML5 Web Sockets通信

HTML5 跨文档消息传输

HTML5 离线应用程序【2】

HTML5 离线应用程序【1】

HTML5 本地数据库

HTML5 Web Storage

HTML5 多媒体播放【3】

HTML5 多媒体播放【2】

HTML5 多媒体播放【1】

HTML5 文件API

最近访客更多访客>>