h5 簡單拖放

　　最新的HTML5標準爲全部的html元素規定了一個draggable屬性，它代表了元素是否能夠拖動，默認狀況下，圖像，連接，選中的文字是能夠拖動的，由於他們的draggable屬性被自動設置爲true，其餘元素默認值爲false。IE10+支持這個屬性。

 

1、拖放事件

　　對某個元素進行拖動時，將依次觸發下列事件：

1)dragstart    (表示按下鼠標鍵並開始移動鼠標的時，進行觸發)

2)drag         （dragstart事件觸發完隨即觸發drag事件，在元素拖動期間不停的觸發該事件，與mousemove事件相似）

3)dragend   （當拖動中止時，不管是放在有效仍是無效目標上會觸發dragend事件）

 

　　上面的三個事件的目標都是被拖動的元素。接下來的事件的目標是做爲放置目標的元素。

1)dragenter  （表示當元素被拖動到放置目標上就會觸發，相似於mouseover事件）

2)dragover   （隨即觸發dragover事件，且被拖動元素一直在放置目標的範圍內移動就一直持續觸發）　

3)dragleave或drop  （當元素被拖出了放置目標，dragover事件再也不發生，他會觸發dragleave事件，相似於mouseout事件，若是元素放到了放置目標中，則會觸發drap事件而不是dragleave事件。）

 

　　在拖動元素通過一些無效放置目標的時候，能夠看到一個圓環中有一個反斜線的特殊光標，表示不能放置，不過咱們能夠重寫dragenter和dragover事件的默認行爲。即調用它的event.preventDefault()方法

 

dataTransfer對象

它是事件對象的一個屬性，用於從被拖動元素向放置目標傳遞字符串格式的數據。它有二個方法，

1)getData()  表示能夠取得由setData()保存的值。

2)setData() 它的第一個參數也是getData()方法的惟一個參數，是一個字符串表示保證的數據類型，"text"或者"URL"。

　　若是將數據保存爲URL瀏覽器會把它當成網頁中的連接，當把它放置到地址欄上會打開該URL。

 

先來看個例子：

<!--下面的代碼將一張圖片拖入到一個自定義的矩形放置目標中-->
<style>#div1{width:298px; height:206px;border:1px solid #aaaaaa;}</style>


<script> 
function allowDrop(){ 
//重寫dragover事件的默認行爲，將無效放置目標設置爲可放置目標
event.preventDefault();}

function dragstart(){   
//能夠在拖動元素時，在dragstart事件中調用setData(),手動保存要傳輸的數據，以便未來使用。
event.dataTransfer.setData("text",event.target.id);}

function drop(){　            
//保存在dataTransfer對象中的數據只能在drop事件處理程序中讀取
//元素拖到放置目標中會觸發drop事件。
var kk=event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(kk));}
</script>

<div id="div1" ondrop="drop()" ondragover="allowDrop()"></div>  
<img  ondragstart="dragstart()" id="drag1" src="http://images.cnblogs.com/cnblogs_com/rain-null/1038612/o_33.jpg"/>

 

 

拖動前：

　　　　　

拖動後：

 

                  

 

下面的代碼表示當拖動黃色矩形時，i變量自增，結果拖到放置目標且複製變量i的值。

<div id="test"  draggable="true" style="height:100px;width:100px;background:yellow;">0</div>
<div id="t"  style="height:30px;width:100px;background:pink;margin:50px 0"></div>  

<script>
var i=0;
test.ondrag = function(){test.innerHTML = i++;}
t.ondragover=function(){event.preventDefault();}
t.ondrop=function(){t.innerHTML=i-1;}
</script>