站長(zhǎng)資訊網(wǎng)
具體方法如下：
1、對(duì)象元素的draggable屬性設(shè)置為true(draggable="true")。還需要注意的是a元素和img元素必須指定href；
2、編寫拖拽有關(guān)的事件處理代碼：
（學(xué)習(xí)視頻分享：html視頻教程）
3、案例實(shí)現(xiàn)代碼：
（1）HTML代碼段：
<div id="cun" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div> <br /> <img src="img/html5.png" id="tuo" draggable="true" οndragstart="drag(event)"/>
登錄后復(fù)制
（2）CSS代碼段：
#tuo{ width: 540px; height: 320px; background: #e54d26; } #cun{ width: 540px; height: 320px; border: 2px solid #d2d2d2; box-shadow: 1px 4px 8px #646464; } img{ width: 500px; height: 280px; }
登錄后復(fù)制
（3）JavaScript代碼段：
function allowDrop(ev){ //不執(zhí)行默認(rèn)處理（拒絕被拖放） ev.preventDefault(); }; function drag(ev){ //使用setData(數(shù)據(jù)類型，攜帶的數(shù)據(jù)) //方法將要拖放的數(shù)據(jù)存入dataTransfer對(duì)象 ev.dataTransfer.setData("Text",ev.target.id); }; function drop(ev){ //不執(zhí)行默認(rèn)處理（拒絕被拖放） ev.preventDefault(); //使用getData()獲取到數(shù)據(jù)，然后賦值給data var data = ev.dataTransfer.getData("Text"); //使用appendChild方法把拖動(dòng)的節(jié)點(diǎn)放到元素節(jié)點(diǎn)中成為其子節(jié)點(diǎn) ev.target.appendChild(document.getElementById(data)); };
登錄后復(fù)制
4、實(shí)現(xiàn)的效果如下：
（1）未拖放之前：
（2）拖放之后
相關(guān)推薦：html5教程
