拖放(Drag和Drop)--html5
拖放，就是抓取一個(gè)對(duì)象后拖放到另一個(gè)位置。很常用的一個(gè)功能，在還沒有html5的時(shí)候，我們實(shí)現(xiàn)這個(gè)功能，通常會(huì)用大量的js代碼，再利用mousemove,mouseup等鼠標(biāo)事件來實(shí)現(xiàn)，總的來說比較麻煩。在html5中，引入了可以直接進(jìn)行拖放的api，大大簡(jiǎn)化了我們的操作。
瀏覽器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注釋：在 Safari 5.1.2 中不支持拖放。
如何實(shí)現(xiàn)
接下來用個(gè)實(shí)例來總結(jié)一下拖放的幾個(gè)步驟：
第一步：設(shè)置元素為可拖放
利用draggable="true"設(shè)置元素為可拖放。
比如這樣：
<img src="" draggable="true">
或這樣
<div draggable="true">haha</div>
第二步:拖動(dòng)開始和設(shè)置拖動(dòng)數(shù)據(jù)-ondragstart和setData
在一個(gè)元素中，ondragstart屬性會(huì)調(diào)用一個(gè)函數(shù)，這個(gè)函數(shù)定義了被拖動(dòng)的數(shù)據(jù)，dataTransfer.setData()方法設(shè)置了
被拖數(shù)據(jù)的數(shù)據(jù)類型和值，數(shù)據(jù)類型可自己設(shè)置（即下面代碼中的“Text”）。值即被拖數(shù)據(jù)的id，所以拖動(dòng)元素和被放置
元素均需設(shè)置id。
如下：
<div id="div2" draggable="true" οndragstart="drag(event)" style="border:1px red solid;width: 200px;height:100px;">hahahhahhahahahaha</div>
function drag(ev){
????? ev.dataTransfer.setData("Text",ev.target.id);
}
第三步：放在何處-ondragover
ondragover規(guī)定被拖動(dòng)的數(shù)據(jù)放置在何處。
默認(rèn)地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式，在這里，調(diào)用 preventDefault() 來避免瀏覽器對(duì)
數(shù)據(jù)的默認(rèn)處理。
<div id="div1" οndragοver="allowDrop(event)" style="border:1px green solid;width: 300px;height:250px;"></div>
?function allowDrop(ev){
??????? ev.preventDefault();
}
第四步：進(jìn)行放置-ondrop
當(dāng)放置被拖數(shù)據(jù)時(shí)，會(huì)發(fā)生ondrop 事件。ondrop會(huì)調(diào)用一個(gè)函數(shù)。
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)" style="border:1px green solid;width: 300px;height:250px;"></div>
function drop(ev){
??????? ev.preventDefault();
??????? var data=ev.dataTransfer.getData("dd");
??????? ev.target.appendChild(document.getElementById(data));
}
上面代碼中g(shù)etData()方法里的數(shù)據(jù)類型必須與setData()里定義的數(shù)據(jù)類型一致。
全部代碼如下：
<!DOCTYPE html>
?<html>
? <head>
? <meta charset="utf-8"/>
??? <title></title>
? </head>
? <body>
????? <div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)" style="border:1px green solid;width: 300px;height:250px;"></div>
????? <img id="div3" src="QQ圖片20150925120406.jpg" draggable="true" οndragstart="drag(event)" style="border:1px red solid;width: 200px;height:100px;">
????? <div id="div2" draggable="true" οndragstart="drag(event)" style="border:1px red solid;width: 200px;height:100px;">hahahhahhahahahaha</div>
?? </body>
?? <script>
???? function allowDrop(ev){
??????? ev.preventDefault();
???? }
???? function drag(ev){
????? ev.dataTransfer.setData("dd",ev.target.id);
???? }
???? function drop(ev){
??????? ev.preventDefault();
??????? var data=ev.dataTransfer.getData("dd");
??????? ev.target.appendChild(document.getElementById(data));
???? }
?? </script>
轉(zhuǎn)載于:https://www.cnblogs.com/airen123/p/9935233.html
總結(jié)
以上是生活随笔為你收集整理的拖放(Drag和Drop)--html5的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： luogu2467/bzoj1925 地
- 下一篇： md