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

創(chuàng)新互聯(lián)公司是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專(zhuān)注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開(kāi)發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計(jì)，網(wǎng)站模板，微信公眾號(hào)開(kāi)發(fā)，軟件開(kāi)發(fā)，成都小程序開(kāi)發(fā)，十載建站對(duì)服務(wù)器托管等多個(gè)行業(yè)，擁有多年的網(wǎng)站維護(hù)經(jīng)驗(yàn)。

具體方法如下：

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

2、編寫(xiě)拖拽有關(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ù)類(lèi)型，攜帶的數(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è)資訊頻道！