JavaScript HTML5脚本编程——“原生拖放”的注意要点

xafd3312 9年前

来自： https://segmentfault.com/a/1190000004418255

最早在网页中引入JavaScript拖放功能是IE4。当时，网页中只有两种对象可以拖放：图像和某些文本。在IE4中，唯一有效的放置目标是文本框。到了IE5，拖放功能得到拓展，添加了新的事件，而且几乎网页中的任何元素都可以作为放置目标。IE5.5更进一步让网页中的任何元素都可以拖放。HTML5以IE的实例为基础指定了拖放规范。

拖放事件

拖动某些元素时，将一次触发下列事件（ 被拖放元素上的事件 ）：

  • dragstart

  • drag

  • dragend

拖动开始时，可以通过ondragstart事件处理程序来运行JavaScript代码。触发dragstart事件后，随即会触发drag事件，而且在元素被拖动期间会持续发送该事件。这个事件与mousemove事件相似，在鼠标移动过程中，mousemove事件也会持续发生。当拖动停止时（无论是把元素放到了有效的放置目标，还是放到了无效的放置目标上），会触发dragend事件。

浏览器不会在拖动期间改变被拖动元素的外观，但你可以自己修改。

当元素被拖放到一个有效的放置目标上时，下列事件会依次发生（ 放置目标元素上的事件 ）：

  • dragenter

  • dragover

  • dragleave 或 drop

只要元素被拖动到放置目标上，就会触发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对象。

dataTransfer对象有两个主要方法：

  • getData()

  • setData()

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.w3cmm.com/");

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

  • effectAllowed

通过dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列4个可能的值:

  • none ：不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。

  • move ：应该把拖动的元素移动到放置目标。

  • copy ：应该把拖动的元素复制到放置目标。

  • link ：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL）。

要使用dropEfect属性，必须在ondraggenter事件处理程序中针对放置目标来设置它。

dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖放元素的哪种dropEffect，effectAllowed属性可能的值如下:

  • uninitialized ：没有该被拖动元素放置行为。

  • none ：被拖动的元素不能有任何行为。

  • copy ：只允许值为copy的dropEffect。

  • link ：只允许值为link的dropEffect。

  • move :只允许值为move的dropEffect。

  • copyLink ：允许值为copy和link的dropEffect。

  • copyMove ：允许值为copy和link的dropEffect。

  • linkMove ：允许职位link和move的dropEffect。

  • all ：允许任意dropEffect。

必须在ondraggstart事件处理程序中设置effectAllowed属性。

可拖动

让其它元素可以拖动也是可能的。HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动。

<!-- 让这个图像不可以拖动 -->  <img src="smile.gif" draggable="false" alt+"Smiley face">  <!-- 让这个元素可以拖动 -->  <div draggable="true">...</div>

其他成员

HTML5规范规定dataTransfer对象还应该包含下列方法和属性。

  • addElement(element) ：为拖动操作添加一个元素。添加这个元素只影响数据（即增加作为拖动源而影响回调的对象），不会影响拖动操作时页面元素的外观。在写作文本时，只有Firefox 3.5+实现了这个方法。

  • clearData(format) ：清除以特定格式保存的数据。实现这个方法的浏览器有IE、Firefox 3.5、Chrome和Safari 4+。

  • setDragImage(element, x, y) ：指定一副图像，当拖动发生时，显示在光标下方。这个方法接受的三个参数分别是要显示的HTML元素和光标在图像中的x、y坐标。其中，HTML元素可以是一副图像，也可以是其它元素。是图像则显示图像，是其它元素则显示渲染后的元素。实现这个方法的浏览器有Firefox 3.5+、Safari 4+ 和 Chorme。

  • types ：当前保存的数据类型。这是一个类似数组的集合，以“text”这样的字符串形式保存着数据类型。实现这个属性的浏览器有IE10+、Firefox 3.5+和Chrome。