HTML5新属性-----拖放

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

1、可拖放属性draggable

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

　　例如： <!--让这个图像不能够拖动-->

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

　　　　　<!--让这个元素能够拖动-->

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

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

2、事件对象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类型名。在遇到没法识别的数据类型时，会报错。

3、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属性。

4、拖放事件

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事件的默认行为。