HTML5新属性-----拖放

Posted 2020-07-10 晴天碧日

　　最早引入JS拖放功能的是IE4，当时，网页中只有两种对象可以拖放：图像和某些文本。拖动图像时，把鼠标放在图像上，按住鼠标不放就可以拖动它。拖动文本时，需要选中文本，然后可以像拖动图像一样拖动被选中的文本。在IE4中，唯一有效的放置目标是文本框，到了IE5拖放功能得到扩展，添加了新的事件，而且网页中任何元素都可以作为放置目标，IE5.5更进一步，让网页中的任何元素都可以拖放，IE，Firfox3.5，Safari3+，Chrome都实现了原生拖放功能。

一、可拖放属性draggable

　　默认情况下，图像、链接、文本是可以拖动的，文本只有在被选中的情况下才能拖动，而图像和链接在任何时候都可以拖动，这是因为图像和链接 的draggable属性自动被设置成true，而其他元素这个属性的默认值都是false，所以要想让其他元素可拖动，或者让图像或链接不能拖动，都可以设置draggable这个属性来改变他们的可拖动状态。

　　例如： <!--让这个图像不可以拖动-->

　　　　　　<img src="test.jpg" draggable="false" >

　　　　　<!--让这个元素可以拖动-->

　　　　　　<div draggable="true"></div>

支持draggable属性的浏览器有IE10+，Firfox4+，Safari5+，Chrome，另外为了让Firfox支持可拖放属性，还必须添加一个ondragstart事件处理程序，并在dataTransfer对象中保存一些信息。

二、事件对象dataTransfer

　　dataTransfer是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据，因为它是事件对象的属性，所以只能在拖放事件的事件处理程序中访问dataTransfer对象。在事件处理程序中，可以使用这个对象的属性和方法，来完善拖放功能，

　　dataTransfer对象主要有两个方法：setData() 和 getData(),getData()可以取得由setData()保存的值，setData()方法的第一个参数，也是getData()方法的唯一一个参数，是一个字符串，表示保存的数据类型，取值为"text"或"URL"。

　　例如：

　　　　　　//设置和接收文本数据

　　　　　　　　event.dataTransfer.setData("text","some text");

　　　　　　　　var text=event.dataTransfer.getData("text");

　　　　　　//设置和接收URL

　　　　　　　　event.dataTransfer.setData("URL","http://www.blog.com/");

　　　　　　　　event.dataTransfer.getData("URL");

　　IE只定义了"text"和"URL"两种有效的数据类型，而html5则对此加以扩展，允许指定各种MIME类型，考虑到向后兼容，H5也支持"text"和"URL"，但这两种类型会被映射为"text/plain"和"text/uri-list"。实际上，dataTransfer对象可以为每种MIME类型都保存一个值，保存在dataTransfer对象中的数据只能在drop事件处理程序中读取，如果没有在onDrop处理程序中读到数据，那就是dataTransfer对象已被销毁，数据也丢失了。

　　将数据保存为文本和保存为URL是有区别的，如果将数据保存为文本格式，那么数据不会得到任何特殊处理，而如果将数据保存为URL，浏览器会将其当成网页中的链接，，也就是如果你把它放置到另一个浏览器窗口中，浏览器就会打开该URL。

　　由于Firfox在其第5个版本之前不能正确的将"url"和"text"映射为"text/uri-list"和"text/plain",但是却能把"Text"(T大写)映射为"text/plain",为了更好的在跨浏览器的情况下从dataTransfer对象取得数据，最好在取得URL数据是检测两个值，而在取得文本数据时使用"Text"。

//读取URL

　　var url=event.dataTransfer.getData("url")||event.dataTransfer.getData("text/uri-list");

//读取文本

　　vat text=dataTransfer.getData("Text");

　　　注意。一定要把端数据类型放在前面，因为IE10及之前的版本仍然不支持扩展的MIME类型名。在遇到无法识别的数据类型时，会报错。

三、dropEffect 和 effectAllowed属性　

　　dataTranfer 对象的两个属性：dropEffect 和 effectAllowed，这两个属性用来确定被拖动元素以及作为放置目标的元素能够接收什么操作。

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

　　　　(1)"none"：不能把拖动的元素放在这里，这是除文本框之外所有元素的默认值

　　　　(2)"move"：应该把拖动的元素移动到放置目标

　　　　(3)"copy"：应该把拖动的元素复制到放置目标

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

把元素拖动到放置目标上时，以上每一个值都会导致光标显示为不同的符号。要使用dropEffect属性，必须在ondragenter事件处理程序中针对放置目标来设置它。

　　dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖动的元素的哪种dropEffect,effectAllowed属性可能的值有：

　　　　(1)"uninitialized"：没有给被拖动元素设置任何放置行为

　　　　(2)"none"：被拖动的元素不能有任何行为

　　　　(3)"copy"：只允许值为"copy"的dropEffect

　　　　(4)"link"：只允许值为"link"的dropEffect

　　　　(5)"move"：只允许值为"move"的dropEffect

　　　　(6)"copyLink"：只允许值为"copy"和"link"的dropEffect

　　　　(7)"copyMove"：只允许值为"copy"和"move"的dropEffect

　　　　(8)"linkMove"：只允许值为"link"和"move"的dropEffect

　　　　(9)"all"：允许任意dropEffect

　　注意，必须在ondragstart事件处理程序中设置effectAllowed属性。

四、拖放事件

1.拖动某元素时，将依次触发下列事件：

　　(1)dragstart:按下鼠标并开始移动时，会在被拖放的元素上触发dragstart事件

　　(2)drag：触发dragstart事件后，随即就会触发drag事件，而且爱元素被拖动期间会持续触发该事件

　　(3)dragend：当拖动停止时（无论是把该元素放到了有效的放置目标上还是放到了无效的放置目标上），会触发dragend事件

　　上面这三个事件的目标都是被拖动元素，大多数浏览器会为正在被拖动的元素创建一个半透明的副本，这个副本始终跟随着光标移动。

 

2.当某个元素被拖动到一个有效的放置目标上时，下列事件会依次触发：

　　(1)dragenter：只要有拖动元素被拖动到放置目标上，就会触发dragenter事件

   　(2)dragover：在被拖动元素爱放置目标的范围内移动时，就会持续触发改事件

　　(3)dragleave 或drop：当被拖动元素拖出了放置目标，将触发dragleave事件，如果元素被放到了放置目标中，则会触发drop，而不会触发dragleave事件。

　　什么是有效的的放置目标呢？在拖动元素经过某些无效放置目标时，可以看到一种特殊的光标（圆环中有一条反斜杠），表示不能放置。虽然所有元素都支持放置目标事件，但这些元素默认是不允许放置的，所有要想把任何元素变成有效的放置目标，方法是重写dragenter 和dragover事件的默认行为，也就是event.preventDefault()。这样，当被拖动元素移动到放置目标上时，光标变成了允许放置的符号，释放鼠标时，也会触发drop事件。但是drop事件的默认行为是打开被放盗放置目标上的URL，当吧文本拖放到放置目标上，则会导致无效的URL错误，因此为了让Firfox致辞正常的拖放，还要取消drop事件的默认行为。