最早在网页中引入JavaScript拖放功能是IE4。当时,网页中只有两种对象可以拖放:图像和某些文本。在IE4中,唯一有效的放置目标是文本框。到了IE5,拖放功能得到拓展,添加了新的事件,而且几乎网页中的任何元素都可以作为放置目标。IE5.5更进一步让网页中的任何元素都可以拖放。HTML5以IE的实例为基础指定了拖放规范。 拖放事件拖动某些元素时,将一次触发下列事件( 被拖放元素上的事件 ):
拖动开始时,可以通过ondragstart事件处理程序来运行JavaScript代码。触发dragstart事件后,随即会触发drag事件,而且在元素被拖动期间会持续发送该事件。这个事件与mousemove事件相似,在鼠标移动过程中,mousemove事件也会持续发生。当拖动停止时(无论是把元素放到了有效的放置目标,还是放到了无效的放置目标上),会触发dragend事件。 浏览器不会在拖动期间改变被拖动元素的外观,但你可以自己修改。 当元素被拖放到一个有效的放置目标上时,下列事件会依次发生( 放置目标元素上的事件 ):
只要元素被拖动到放置目标上,就会触发dragenter事件(类似于mouseover事件)。 紧随其后的是dragover事件,而且被拖动的元素还在放置目标的范围内移动时,就会持续触发该事件。 如果元素被拖出了放置目标,dragover事件不再发生,但会触发dragleave事件(类似于mouseout事件)。 如果元素被放到了放置目标中,则会触发drop事件而不是dragleave事件。 自定义放置目标可以把任何元素变成有效的放置目标,方法是重写dragenter和dragover事件的默认行为。 var droptarget = document.getElementById("droptarget"); droptarget.ondragover = function() { event.preventDefault(); }; droptarget.ondragenter = function () { event.preventDefault(); }; 在Firefox 3.5+中,放置事件的默认行为是打开被放到放置目标上的URL。因此,为了让Firefox支持正常的拖放,还要取消drop事件的默认行为,阻止它打开URL: var droptarget = document.getElementById("droptarget"); droptarget.ondragover = function() { event.preventDefault(); }; droptarget.ondragenter = function () { event.preventDefault(); }; droptarget.ondrop = function () { event.preventDefault(); }; dataTransfer对象为了在拖放操作时实现数据交换,IE 5引入了
它是事件对象的一个属性,用于从被拖动元素向放置目标传递字符串格式的数据。因为它是事件对象的属性,所以只能在拖放事件的事件处理程序中访问dataTransfer对象。 dataTransfer对象有两个主要方法:
getData()可以取得由setData()保存的值。setData()方法的第一个参数,也是getDAta()方法唯一的一个参数,是一个字符串,表示保存的数据类型,取值为”text”或“URL”,如下所示: //设置和接收文本数据 event.dataTransfer.setDAta("text", "some text"); var text = event.dataTransfer.getData("text"); //设置和接收URL event.dataTransfer.setData("URL", "HTML://www.ldhost.cn/"); IE只定义了“text”和“URL”两种有效的数据类型,而HTML5则对此加以扩展,允许指定各种MIME类型。HTML5也支持“text”和“URL”,但这两种类型会被映射为“text/plain” 和 “text/uri-list” 。 保存在dataTransfer对象中的数据只能在drop事件处理程序中读取。在拖动文本框中的文本时,浏览器会调用setData()方法,将拖动的文本以“text”格式保存在dataTransfer对象中。类似地,在拖放链接或图像时,会调用setData()方法并保存URL。也可以在dragstart事件处理程序中调用setData(),手工保存自己要传输的数据,以便将来使用。 Firefox在其第5个版本之前不能正确地将“URL”和“text”映射为“text/uri-list”和“text/plain”。但是却能把“Text”映射为“text/plain”。为了更好地在跨浏览器的情况下从dataTransfer对象取得数据,最好在取得URL数据时检测两个值,而在取得文本数据时使用“text”。 var dataTransfer = event.dataTransfer; //读取URL var url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list"); //读取文本 var text = dataTransfer.getData("Text"); dropEffect与effectAllowed利用dataTransfer对象,可不光是能够传输数据,还能通过它来确定被拖动的元素以及作为放置目标的元素能够接受什么操作。为此,需要访问dataTransfer对象的两个属性:
通过dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列4个可能的值:
要使用dropEfect属性,必须在ondraggenter事件处理程序中针对放置目标来设置它。dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖放元素的哪种dropEffect,effectAllowed属性可能的值如下:
必须在ondraggstart事件处理程序中设置effectAllowed属性。 可拖动让其它元素可以拖动也是可能的。HTML5为所有HTML元素规定了一个draggable属性,表示元素是否可以拖动。 <!-- 让这个图像不可以拖动 --> <img src="smile.gif" draggable="false" alt+"Smiley face"> <!-- 让这个元素可以拖动 --> <div draggable="true">...</div> 其他成员HTML5规范规定dataTransfer对象还应该包含下列方法和属性。
|