HTML5實現原生拖放的案例

之前做項目過程中遇到了一個拖放的效果實現，業務場景是爲課程表手動拖拽添加課程。翻看了一下H5新增元素裏面，有實現拖放的效果，於是就寫了一個demo，效果如下圖：

HTML代碼：

<!-- 課程元素 -->
<div class="list">
	<div class="item blue" id="html" draggable="true" ondragstart="start(event)">HTML</div>
	<div class="item pink" id="css" draggable="true" ondragstart="start(event)">CSS</div>
	<div class="item green" id="js" draggable="true" ondragstart="start(event)">JS</div>
</div>

<!-- 要放置的區域 -->
<div id="web" ondrop="drop(event)" ondragover="toOver(event)">
	<div style="font-weight: bold;">課程表：</div>
</div>

首先，爲了使元素可拖動，把 draggable 屬性設置爲 true ：

<div draggable="true" />

然後，規定當元素被拖動時觸發的事件，在上面的HTML代碼中，ondragstart 屬性調用了一個函數，start(event)，該事件方法是在拖拽元素時觸發。
ondragover 事件是在要放置的區域元素上定義，當鼠標拖拽着元素在該區域上方時觸發。
ondrop 事件是把元素拖拽到指定區域並鬆開鼠標時觸發。

CSS代碼：

.list {
	display: flex;
}

.item {
	width: 100px;
	height: 40px;
	margin: 10px;
	color: #fff;
	text-align: center;
	line-height: 40px;
	border-radius: 10px;
}

.blue {
	background-color: royalblue;
}

.pink {
	background-color: deeppink;
}

.green {
	background-color: forestgreen;
}

#web {
	width: 150px;
	height: 220px;
	border: 1px solid #000;
	position: absolute;
	top: 150px;
	left: 100px;
	box-sizing: border-box;
	padding: 10px;
}

CSS沒什麼可說的，自己看吧。

JavaScript代碼：

//開始拖拽元素
function start(ev) {
	id = ev.target.id; //獲取拖拽元素的ID
}

//要放置的區域
function toOver(ev) {
	ev.preventDefault(); //阻止默認事件
}

//放置元素的方法
function drop(ev) {
	var app = document.getElementById(id); // 獲取拖動的元素對象
	var div = document.getElementById(ev.target.id); // 放置區域的元素對象

	div.appendChild(app); // 把拖拽對象追加到放置區域中
}

上面的JS代碼要配合着HTML標籤上的事件函數查看，其實，整個過程很簡單：

1. 當鼠標拖動元素時，觸發 ondragstart() 事件，獲取要拖動元素的ID；
2. 當鼠標拖拽着元素放置到指定區域時，觸發 ondropover() 事件，在這裏要阻止默認事件的觸發；
3. 當鼠標拖拽元素到指定區域，並鬆開鼠標時，觸發 ondrop() 事件，獲取拖拽元素的對象，追加到放置區域的節點內部；