IE下的拖拽Drag事件和示例
在先前某个系统测试的时候，有一个测试人员提到她们一个自认为是的bug：在ie浏览器上，拖动系统某个页面上的某个图片对象到页面边缘的某个位置，会出现该图片的单独显示页面。
看到这个bug描述时，测试了一下，发现还真有那么回事，看看别人写的那段代码，似乎有没有什么问题，其实就是一个简单的img对象而已，后来查了一下，才豁然明白，原来早从IE4.0开始，网页上的图像和文本这两个对象可以初始化系统拖放。在后续的IE版本中，拖放功能愈发强大，几乎页面上的所有内容都能拖动。真是才疏学浅呢！可笑的是，搞web一年有余后，才知道这个东东，真是不善于观察啊。
在朋友的推荐下，买了《JavaScript高级程序设计》这本书，今天偶然翻到一章，居然是“拖放”，该章系统讲了拖放事件，我也跟着学了学。下面是记录下来的学习过程。
一． 拖放初探
有两种使用JavaScript的方法来实现拖放功能，即系统拖放和模拟拖放。
微软为IE提供的拖放事件有两类，其中一类在被拖动的项上触发，还有一些在放置目标上触发，分别包含如下事件：
1． 拖放项事件
dragstart： 当鼠标按下按钮，开始移动鼠标时触发；
drag：在dragstart事件触发后，只要对象还是被移动，一直触发该事件；
dragend：在拖动停止时触发。
2． 放置目标事件
dragenter：当对象被放置到有效的放置目标上时触发，类似于mouseover；
dragover：当dragenter发生后，当被拖动的项在放置目标的边界内时，将一直触发该事件；
dragleave：当dragover停止触发，项被拖出放置目标时，触发该事件，类似于mouseout；
drop：如果被拖动的项正是在这个目标上放下的，则会触发drop事件而不是dragleave事件。
为了学习这两种类型的事件，让我们来看一个综合的例子。代码如下：
<html> <head> <title>拖动测试</title> <script type="text/javascript"> function handleDropEvent(oEvent) { var textBox = document.getElementById("txt1"); textBox.value = oEvent.type + "\n"; } </script> <head> <body> <form> <p> <img src="amigo.jpg" ondragstart="handleDropEvent(event)" ondrag="handleDropEvent(event)" ondragend="handleDropEvent(event)" /> </p> <p> <input type="text" value="拖动这个文本" ondragenter="handleDropEvent(event)" ondragover="handleDropEvent(event)" ondragleave="handleDropEvent(event)" ondrop="handleDropEvent(event)" /> </p> <p> <input type="text" name="txt1" id="txt1" readonly="true"/> </p> </form> </body> </html>
因这个例子比较简单，在浏览器中运行一下就可以看到结果，在此不赘述。
二．拖放进阶
当尝试将一些文本或图像拖放到无效的对象上时，会看到一个特别的鼠标形状，即圆圈中有条线，表示的是该位置不能放置。尽管所有的元素都支持放置目标的事件，但默认情况下它们的行为是不允许放置的，例如div。若想将<div/>变成有效的放置对象，必须覆盖默认的dragenter和dragover行为，因为这些是特定于IE的，所以可直接将oEvent.returnValue特性设置为false，实例代码入下：
<html> <head> <title>拖动测试</title> <script type="text/javascript"> function handleDropEvent(oEvent) { var textBox = document.getElementById("txt1"); textBox.value = oEvent.type + "\n"; switch(oEvent.type) { case "dragover": case "dragenter": oEvent.returnValue = false; } } </script> <head> <body> <form> <p> <input type="text" value="拖动该文本" ondragstart="handleDropEvent(event)" ondrag="handleDropEvent(event)" ondragend="handleDropEvent(event)" /> </p> <p> <div style="background-color: red; height: 100px; width: 100px" ondragenter="handleDropEvent(event)" ondragover="handleDropEvent(event)" ondragleave="handleDropEvent(event)" ondrop="handleDropEvent(event)" /> </p> <p> <input type="text" name="txt1" id="txt1" readonly="true"/> </p> </form> </body> </html>
在浏览器中运行时，选中“拖动该文本”后进行拖动，将其拖动到div上时，可发现鼠标形状变成带加号的指针，表示此处可放置目标，读者可以删除上文代码中的switch语句后，进行相同操作，可发现鼠标形状是圆圈加以横条，即不可放置状态的。
