這篇文章主要介紹如何使用html5實(shí)現(xiàn)簡(jiǎn)單的拖動(dòng)功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)是一家專業(yè)提供云浮企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站建設(shè)、做網(wǎng)站、H5網(wǎng)站設(shè)計(jì)、小程序制作等業(yè)務(wù)。10年已為云浮眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

具體方法如下：

1、對(duì)象元素的draggable屬性設(shè)置為true(draggable="true")。還需要注意的是a元素和img元素必須指定href；

2、編寫拖拽有關(guān)的事件處理代碼：

3、案例實(shí)現(xiàn)代碼：

（1）HTML代碼段：

（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;
}

（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));
};

4、實(shí)現(xiàn)的效果如下：

（1）未拖放之前：

（2）拖放之后

以上是“如何使用html5實(shí)現(xiàn)簡(jiǎn)單的拖動(dòng)功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：如何使用html5實(shí)現(xiàn)簡(jiǎn)單的拖動(dòng)功能-創(chuàng)新互聯(lián)
路徑分享：http://weahome.cn/article/dojohd.html