拖拽事件

通过拖拽事件，咱们就可以控制拖拽很多东西了。其中什么元素或者是哪里发生了拖拽事件是最关键的。有些事件是在被拖动的元素上触发，有些事件是在放置目标上触发的。拖动某元素时候，触发的事件有：dragstart事件、drag事件和dragend事件。

按下鼠标键并开始移动鼠标的时候，会在被拖拽的元素上触发dragstart事件。这时候光标变成”不能放”符号(圆环中有一条反斜线)，表示不能把元素放在自己上门。拖拽开始时，可以通过ondragstart事件处理程序运行JavaScript代码。

触发dragstart事件后，随即会触发drag事件，而在元素被拖动期间会持续触发drag事件。这个事件与mousemove和touchmove事件类似。当拖动停止时(无论把元素放到了有效的放置目标，还是放到了无效的放置目标上)，都会发生dragend事件。

上面说的三个事件的目标都是被拖动的元素触发。默认情况下，浏览器不会再拖动期间改变被拖动元素的外观。但是可以自行修改。不过，大多数浏览器会为正被拖动的元素创建一个半透明的副本，这个副本始终跟随光标移动。当某个元素被拖动到一个有效的放置目标的时候，会触发的事件有：dragenter事件、dragover事件和dragleave或者drop事件。

只要有元素被拖动到放置目标上，就会触发dragenter事件(类似于mouseover事件)。紧随其后的是dragover事件，而且在被拖动的元素还在放置目标的范围内移动是，会连续触发dragover事件。如果元素被拖出放置目标，dragover事件不再发生，但是会触发dragleave事件(类似于mouseout事件)。如果元素被放到了放置目标中会触发drop事件而不是dragleave事件。dragenter事件、dragover事件和dragleave或者drop事件的目标都是作为放置目标的元素。

立即学习“前端免费学习笔记（深入）”；

自定义放置目标

在拖动元素经过某些无效放置目标的时候，可以看到一种特殊鼠标手势(圆环中一条反斜线)，表示不能放置。虽然所有元素都支持放置目标事件，但是这些元素默认是不允许放置的。如果拖动元素经过不允许放置的元素，无论用户如何操作，都不会发生drop事件。不过，你可以把任何元素变成有效的放置目标，方法是重写dragenter和dragover事件的默认行为。

重写了默认行为之后，就会发现当拖动着元素移动到放置目标上的时候，光标变成允许放置的符号。在Firefox 3.5+中，放置事件的默认行为是打开被放到放置目标上的url。如果是把图像拖到放置目标上，页面就会转向图像文件。如果是把文本拖放到放置目标上，则会导致无效url错误。所以为了让Firefox支持政正常的拖放，还要取消drop事件的默认行为，阻止打开拖拽元素的URL。小例子如下

HTML代码

<!-- 拖拽”梦龙小站”到”梦龙”地方的小例子 --><ul><li draggable="true">梦龙小站</li><li draggable="true">梦龙小站</li><li draggable="true">梦龙小站</li></ul><p id="p1">梦龙</p>

CSS代码

li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}#p1{ width:100px; height:100px; background:red; margin:300px;}

JavaScript代码

window.onload = function(){var aLi = document.getElementsByTagName(&#39;li&#39;);var op = document.getElementById(&#39;p1&#39;);var iNow = 0;for(var i=0;i<aLi.length;i++){	aLi[i].ondragstart = function(){ //拖拽前触发			this.style.background = &#39;yellow&#39;;		};		aLi[i].ondragend = function(){  //拖拽结束触发			this.style.background = &#39;&#39;;		};		/*aLi[i].ondrag = function(){ //开始与结束之间，连续触发document.title = iNow++;			};*/}op.ondragenter = function(){  //相当于onmouseover	this.style.background = &#39;green&#39;;		ev.preventDefault();  //阻止默认事件：元素就可以释放了	};op.ondragleave = function(){  //相当于onmouseout		this.style.background = &#39;red&#39;;	};op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发		ev.preventDefault();  //阻止默认事件：元素就可以释放了		document.title = iNow++;	};op.ondrop = function(ev){  //释放鼠标的时候触发		this.style.background = &#39;red&#39;;		alert("梦龙小站，鼠标已经释放");	ev.preventDefault();  //阻止默认事件：防止打开拖拽元素的url};};