利用html5實現(xiàn)簡單的拖動功能

具體方法如下：

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

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

（學習視頻分享：html視頻教程）

3、案例實現(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)"/>

（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í)行默認處理（拒絕被拖放） 	ev.preventDefault(); }; function drag(ev){ 	//使用setData(數(shù)據(jù)類型，攜帶的數(shù)據(jù)) 	//方法將要拖放的數(shù)據(jù)存入dataTransfer對象 	ev.dataTransfer.setData("Text",ev.target.id); }; function drop(ev){ 	//不執(zhí)行默認處理（拒絕被拖放） 	ev.preventDefault(); 	//使用getData()獲取到數(shù)據(jù)，然后賦值給data 	var data = ev.dataTransfer.getData("Text"); 	//使用appendChild方法把拖動的節(jié)點放到元素節(jié)點中成為其子節(jié)點 	ev.target.appendChild(document.getElementById(data)); };

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

（1）未拖放之前：

（2）拖放之后

相關(guān)推薦：html5教程