前面的話
拖放(drag-and-drop,DnD)其實(shí)是兩個(gè)動(dòng)作――拖和放。所以，它涉及到兩個(gè)元素。一個(gè)是被拖的元素，稱為拖放源；另一個(gè)是要放的目標(biāo)，稱為拖放目標(biāo)。本文將通過拆分這兩個(gè)概念來詳細(xì)介紹原生拖放
拖放源
什么樣的元素才是拖放源呢？
HTML5為所有HTML元素規(guī)定了一個(gè)draggable屬性，表示元素是否可以拖動(dòng)
圖像和鏈接的draggable屬性自動(dòng)被設(shè)置成了true，而其他元素這個(gè)屬性的默認(rèn)值都是false
[注意]必須設(shè)置draggable='true'才能生效，只設(shè)置draggable不起作用
默認(rèn)情況下，文本只有在被選中的情況下才能拖動(dòng)，而圖像和鏈接在任何時(shí)候都可以拖動(dòng)。而其他元素則無法被拖放
<input value="文字可拖動(dòng)"><img alt="圖像可拖動(dòng)" src="http://files.cnblogs.com/files/xiaohuochai/zan.gif"><a href="#">鏈接可拖動(dòng)</a><div id="test" style="height:30px;width:300px;background:pink;">元素不可拖動(dòng)</div>
當(dāng)為元素設(shè)置draggable屬性后，普通元素也可以拖動(dòng)
<div draggable="true" style="height:30px;width:100px;background:pink;"></div>
兼容
IE9-瀏覽器不支持draggable屬性，但可通過mousedown事件處理程序調(diào)用dragDrop()方法來實(shí)現(xiàn)拖動(dòng)效果
<div id="test" style="height:30px;width:300px;background:pink;"></div> <script>test.onmousedown = function(){this.dragDrop();}</script> [注意]如果讓firefox支持draggable屬性，必須添加一個(gè)ondragstart事件處理程序，并在dataTransfer對象使用setData()方法來啟動(dòng)效果
拖放事件
拖放源涉及到3個(gè)拖放事件。拖動(dòng)拖放源時(shí)，依次觸發(fā)dragstart、drag和dragend這3個(gè)事件
dragstart
按下鼠標(biāo)鍵并開始移動(dòng)鼠標(biāo)時(shí)，會在被拖放的元素上觸發(fā)dragstart事件。此時(shí)光標(biāo)變成“不能放”符號(圓環(huán)中有一條反斜線)，表示不能把元素放到自己上面
drag
觸發(fā)dragstart事件后，隨即會觸發(fā)drag事件，而且在元素被拖動(dòng)期間會持續(xù)觸發(fā)該事件
dragend
當(dāng)拖動(dòng)停止時(shí)(無論是把元素放到了有效的放置目標(biāo)，還是放到了無效的放置目標(biāo)上)，會觸發(fā)dragend事件
<div id="test" draggable="true" style="height:30px;width:100px;background:pink;">0</div> <script>var timer,i=0;test.ondragstart = function(){this.style.backgroundColor = 'lightgreen';}test.ondrag = function(){if(timer) return;timer = setInterval(function(){test.innerHTML = i++;},100)}test.ondragend = function(){clearInterval(timer);timer = 0;this.style.backgroundColor = 'pink';}</script>拖放目標(biāo)
拖放目標(biāo)是指被拖動(dòng)的元素松開鼠標(biāo)時(shí)被放置的目標(biāo)
拖放源被拖動(dòng)到拖放目標(biāo)上時(shí)，將依次觸發(fā)dragenter、dragover和dragleave或drop這四個(gè)事件
dragenter
只要有元素被拖動(dòng)到放置目標(biāo)上，觸發(fā)dragenter事件
dragover
被拖動(dòng)的元素在放置目標(biāo)的范圍內(nèi)移動(dòng)時(shí)，持續(xù)觸發(fā)dragover事件
dragleave
如果元素被拖出了放置目標(biāo)，觸發(fā)dragleave事件
drop
如果元素被放到了放置目標(biāo)中，觸發(fā)drop事件
[注意]firefox瀏覽器的drop事件的默認(rèn)行為是打開被放到放置目標(biāo)上的URL。為了讓firefox支持正常的拖放，還要取消drop事件的默認(rèn)行為
默認(rèn)情況下，目標(biāo)元素是不允許被放置的，所以不會發(fā)生drop事件。只要在dragover和dragenter事件中阻止默認(rèn)行為，才能成為被允許的放置目標(biāo)，才能允許發(fā)生drop事件。此時(shí)，光標(biāo)變成了允許放置的符號
<div id="test" draggable="true" style="height:30px;width:130px;background:pink;float:left;">拖放源</div> <div id="target" style="float:right;height: 200px;width:200px;background:lightblue;">拖放目標(biāo)</div><script>var timer,i=0;var timer1,i1=0;//兼容IE8-瀏覽器test.onmousedown = function(){if(this.dragDrop){this.dragDrop();}}test.ondragstart = function(){this.style.backgroundColor = 'lightgreen';this.innerHTML = '開始拖動(dòng)';}test.ondrag = function(){if(timer) return;timer = setInterval(function(){test.innerHTML = '元素已被拖動(dòng)' + ++i + '秒';},1000);}test.ondragend = function(){clearInterval(timer);timer = 0;i =0;this.innerHTML = '結(jié)束拖動(dòng)';this.style.backgroundColor = 'pink';}target.ondragenter = function(e){e = e || event;if(e.preventDefault){e.preventDefault();}else{e.returnValue = false;}this.innerHTML = '有元素進(jìn)入目標(biāo)區(qū)域';this.style.background = 'red';}target.ondragover = function(e){e = e || event;if(e.preventDefault){e.preventDefault();}else{e.returnValue = false;}if(timer1) return;timer1 = setInterval(function(){target.innerHTML = '元素已進(jìn)入' + (++i1) + '秒';},1000);}target.ondragleave = function(){clearInterval(timer1);timer1 = 0;i1=0;this.innerHTML = '元素已離開目標(biāo)區(qū)域';this.style.backgroundColor = 'lightblue';}target.ondrop = function(){clearInterval(timer1);timer1 = 0;i1=0;this.innerHTML = '元素已落在目標(biāo)區(qū)域';this.style.backgroundColor = 'orange'; }</script>dataTransfer對象
為了在拖放操作時(shí)實(shí)現(xiàn)數(shù)據(jù)交換，引入了dataTransfer對象，它是事件對象的一個(gè)屬性，用于從被拖動(dòng)元素向放置目標(biāo)傳遞字符串格式的數(shù)據(jù)
dataTransfer對象有兩個(gè)主要方法：getData()和setData()
getData()可以取得由setData()保存的值。setData()方法的第一個(gè)參數(shù)，也是getData()方法唯一的一個(gè)參數(shù)，是一個(gè)字符串，表示保存的數(shù)據(jù)類型，取值為"text"或"URL"
IE只定義了"text"和"URL"兩種有效的數(shù)據(jù)類型，而HTML5則對此加以擴(kuò)展,允許指定各種MIME類型。考慮到向后兼容，HTML5也支持"text"和"URL"，但這兩種類型會被映射為"text/plain"和"text/uri-list"
實(shí)際上，dataTransfer對象可以為每種MIME類型都保存一個(gè)值。換句話說，同時(shí)在這個(gè)對象中保存一段文本和一個(gè)URL不會有任何問題
[注意]保存在dataTransfer對象中的數(shù)據(jù)只能在drop事件處理程序中讀取
在拖動(dòng)文本框中的文本時(shí)，瀏覽器會調(diào)用setData()方法，將拖動(dòng)的文本以"text"格式保存在dataTransfer對象中。類似地，在拖放鏈接或圖像時(shí)，會調(diào)用setData()方法并保存URL。然后，在這些元素被拖放到放置目標(biāo)時(shí)，就可以通過getData()讀到這些數(shù)據(jù)
<div>請將從這堆內(nèi)容不同亂七八糟的文字中挑選一些移動(dòng)到拖放目標(biāo)中</div> <div id="target" style="margin-top:20px;height: 100px;width:200px;background:lightblue;">拖放目標(biāo)</div><div id="result"></div><script>target.ondragenter = function(e){e = e || event;if(e.preventDefault){e.preventDefault();}else{e.returnValue = false;}this.innerHTML = '有元素進(jìn)入目標(biāo)區(qū)域';this.style.background = 'red';}target.ondragover = function(e){e = e || event;if(e.preventDefault){e.preventDefault();}else{e.returnValue = false;}}target.ondragleave = function(e){e = e || event; this.innerHTML = '元素已離開目標(biāo)區(qū)域';this.style.backgroundColor = 'lightblue';}target.ondrop = function(e){e = e || event;if(e.preventDefault){e.preventDefault();}else{e.returnValue = false;}result.innerHTML = '落入目標(biāo)區(qū)域的文字為:' + e.dataTransfer.getData('text');this.innerHTML = '元素已落在目標(biāo)區(qū)域';this.style.backgroundColor = 'orange'; }</script> 當(dāng)然，也可以在dragstart事件處理程序中調(diào)用setData()，手動(dòng)保存自己要傳輸?shù)臄?shù)據(jù)，以便將來使用
<div id="test" draggable="true" data-value="這是一個(gè)秘密" style="height:30px;width:100px;background:pink;">拖動(dòng)源</div> <div id="target" style="margin-top:20px;height: 100px;width:200px;background:lightblue;">拖放目標(biāo)</div><div id="result"></div><script>//兼容IE8-瀏覽器test.onmousedown = function(){if(this.dragDrop){this.dragDrop();}}test.ondragstart = function(e){e = e || event;e.dataTransfer.setData('text',test.getAttribute('data-value'));}target.ondragenter = function(e){e = e || event;if(e.preventDefault){e.preventDefault();}else{e.returnValue = false;}this.innerHTML = '有元素進(jìn)入目標(biāo)區(qū)域';this.style.background = 'red';}target.ondragover = function(e){e = e || event;if(e.preventDefault){e.preventDefault();}else{e.returnValue = false;}}target.ondragleave = function(e){e = e || event; this.innerHTML = '元素已離開目標(biāo)區(qū)域';this.style.backgroundColor = 'lightblue';}target.ondrop = function(e){e = e || event;if(e.preventDefault){e.preventDefault();}else{e.returnValue = false;}result.innerHTML = '落入目標(biāo)區(qū)域的文字為:' + e.dataTransfer.getData('text');this.innerHTML = '元素已落在目標(biāo)區(qū)域';this.style.backgroundColor = 'orange'; }</script>改變光標(biāo)
利用dataTransfer對象，不僅可以傳輸數(shù)據(jù)，還能通過它來確定被拖動(dòng)的元素以及作為放 主站蜘蛛池模板： 宕昌县| 遵义市| 馆陶县| 什邡市| 永胜县| 奉贤区| 广丰县| 炉霍县| 苏尼特右旗| 东港市| 浮山县| 集贤县| 德兴市| 宁强县| 永胜县| 道真| 洞口县| 双牌县| 朝阳市| 绵阳市| 乐都县| 大埔县| 旅游| 无为县| 三门峡市| 兴义市| 探索| 囊谦县| 旬阳县| 建昌县| 甘孜| 惠州市| 开封县| 怀仁县| 博客| 河曲县| 河曲县| 枞阳县| 灵山县| 九龙县| 余干县|