利用html5實現簡單的拖曳功能

具體方法如下：

1、物件元素的draggable屬性設定為true(draggable="true")。另外要注意的是a元素和img元素必須指定href；

2、寫拖曳有關的事件處理程式碼：

（學習影片分享：html影片教學）

3、案例實作程式碼：

（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)"/ alt="利用html5實現簡單的拖曳功能" >

（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){
	//不执行默认处理（拒绝被拖放）
	ev.preventDefault();
};
function drag(ev){
	//使用setData(数据类型，携带的数据)
	//方法将要拖放的数据存入dataTransfer对象
	ev.dataTransfer.setData("Text",ev.target.id);
};
function drop(ev){
	//不执行默认处理（拒绝被拖放）
	ev.preventDefault();
	//使用getData()获取到数据，然后赋值给data
	var data = ev.dataTransfer.getData("Text");
	//使用appendChild方法把拖动的节点放到元素节点中成为其子节点
	ev.target.appendChild(document.getElementById(data));
};

4、實作的效果如下：

（1）未拖曳之前：

（2）拖放之後

#相關推薦：html5教學

以上是利用html5實現簡單的拖曳功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！