HTML5新功能概述：拖放（Drag and Drop）

拖放是HTML5提供的新功能。该函数添加了拖动事件的API并定义了可拖动的属性。例如，h5之前实现的拖放功能实际上是一种模拟方法。当鼠标onmousedown时，它会获取一些当前信息，然后不断更新推送值，当onmousemoveleft和top值​​拖动对象，最后在onmouseup期间给推送对象完全赋值，释放后执行一组程序操作。现在h5已经出来了，不需要模拟了，因为它已经有了标准的事件API。我们看下面的例子：`

<style type="text/css">
.draggable{width: 120px; height: 120px;text-align: center; line-height: 120px; background-color: #8FBC8F; color: white; border: 5px solid yellowgreen; position: absolute; top: 0;left: 0;}
</style>

<div id="draggable" class="draggable" draggable="true">
		draggable
</div>

        var dragEl = document.getElementById('draggable');
        var l = null, t = null;
		
		dragEl.ondragstart = function (e) { // 准备推拽时
			l = e.clientX - this.offsetLeft, t = e.clientY - this.offsetTop;			
		}

		dragEl.ondrag = function (e) {  // 拖拽进行时
			var x = e.clientX, y = e.clientY;				
			this.style.left = x - l + 'px';
			this.style.top = y - t + 'px';
			console.log(x, y, l , t)
		}
		
		dragEl.ondragend = function (e) {   // 拖拽结束时
			var x = e.clientX, y = e.clientY;			
			this.style.left = x - l + 'px';
			this.style.top = y - t + 'px';
		}
复制代码

`

注意：可拖动对象必须将属性draggable设置为true，其他开发思路其实是一样的之前没有太大的区别，只是增加了更多的监控事件，想要了解更多拖放功能的同学可以查看拖放API。

作者：IT Baron
来源：掘金