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事件的默認行爲。