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;  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语句后，进行相同操作，可发现鼠标形状是圆圈加以横条，即不可放置状态的。