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

IE下的拖拽Drag事件和示例相关推荐

java drag drop_原生拖拽,拖放事件(drag and drop)
原生拖拽,拖放事件(drag and drop) 拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改. drag and drop事 ...
html dragover获得拖拽对象,突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
拖拽(Drag/Drop)是个非常普遍的功能.你可以抓住一个对象,并且拖动到你想放置的区域.很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件.在HTM ...
MVVM模式下实现拖拽
MVVM模式下实现拖拽原文:MVVM模式下实现拖拽在文章开始之前先看一看效果图我们可以拖拽一个"游戏"给ListBox,并且ListBox也能接受拖拽过来的数据, 但是我们不 ...
短视频系统源码，检测在手机上的触摸按下、拖拽、抬手
短视频系统源码,检测在手机上的触摸按下.拖拽.抬手 var touch_pos = Vector2.ZERO # 触摸位置 var lift_up_pos = Vector2.ZERO # 抬手位置 ...
android地图拖动事件,地图拖拽相关事件
事件系统 html, body, #container { width: 100%; height: 100%; } 请用鼠标拖拽地图试试地图拖拽相关事件绑定事件解绑事件 //初始化地图对象,加 ...
Android qq消息气泡实现效果,Android 实现仿QQ拖拽气泡效果的示例
效果图: 一.实现思路在列表中默认使用自定义的TextView控件来展示消息气泡,在自定义的TextView控件中重写onTouchEvent方法,然后在DOWN.MOVE.UP事件中分别处理拖拽效 ...
H5 drag拖拽移动小结及示例
drag api是h5中的新功能,用来拖拽页面元素挺有用的,先小结一下首先,基本概念声明,概念部分我是借鉴这篇文章 https://www.cnblogs.com/wuya16/p/DragApi ...
【H5】拖拽3事件( onmousedown ,onmousemove ,onmouseup )
H5 拖拽案例: 用到3个拖拽事件: onmousedown 鼠标按下触发事件 onmousemove 鼠标按下时持续触发事件 onmouseup 鼠标抬起触发事件效果图如下: 以下是实现代码,代码 ...
【GDScript】检测在手机上的触摸按下、拖拽、抬手
Godot 3.2.4 在一个节点脚本里写入如下代码 var touch_pos = Vector2.ZERO # 触摸位置 var lift_up_pos = Vector2.ZERO # 抬手位置 ...

IE下的拖拽Drag事件和示例

IE下的拖拽Drag事件和示例相关推荐

最新文章

热门文章