可随意拖拽方块至任一位置:

1、setCapture方法:多用于容器对象,效果是对指定的对象设置鼠标捕获。使在容器内的子对象的鼠标事件均由容器对象触发,因此,只能在容器对象的鼠标事件函数中进行处理。
当参数为true时,对鼠标进行捕捉,相反,不捕捉。
与这个函数对应,releaseCapture方法释放鼠标捕获,并触发onlosecapture事件。

Javascript 事件捕获(setCapture,captureEvents) :模块拖放居然可以跨出浏览器。到底是什么方法让 mousemove 和 mouseup 事件可以到浏览器外也可以触发,(ie6\ie7不支持 mousemove 和 mouseup)

object.setCapture() 当一个object的被 setCapture 后,他的方法将会被继承到整个文档进行捕获。当不需要把方法继承到整个文档捕获时,要用 object.releaseCapture()

Mozilla 也有类似的功能,方法稍微不同

window.captureEvents(Event.eventType)

window.releaseEvents(Event.eventType)

//针对IE对指定的对象设置鼠标捕获,alert(this._obj.setCapture) =》function setCapture(){ [native code]}

2、element.addEventListener(type,listener,useCapture); 等同于attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)如: document.addEventListener('moueup', this._stopDrag, true);

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <style> #div1 {background:red; width:100px; height:100px; position:absolute; cursor:move;}
#div2 {background:yellow; width:100px; height:100px; position:absolute; cursor:move;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById("div1");
var oDiv1 = document.getElementById('div2');
var oDrag = new Drag(oDiv);
var oDrag1 = new Drag(oDiv1); oDrag.onDragStart = function () {
this.style.background = 'green';
}
oDrag.onDraging = function (x, y)
{
document.title = x + "," + y;
}
oDrag.onDragEnd = function () {
this.style.background = "red";
} }
function Drag(obj) {
var oBj = this;
this._obj = obj;
this._mouseStart = {};
this._divStart = {};
this._obj.onmousedown = function (ev) { //鼠标按下时执行...
oBj._starDrag(ev);
}
} Drag.prototype._starDrag = function (ev) {
var obj = this; //this为obj对象;
var oEvent = ev || event;//ev的值为鼠标按下对象;
this._mouseStart.x = oEvent.clientX; //鼠标按下位置的坐标值
this._mouseStart.y = oEvent.clientY;
this._divStart.x = this._obj.offsetLeft; //容器左上角的坐标
this._divStart.y = this._obj.offsetTop; //ie6\ie7
if (this._obj.setCapture) { //针对IE对指定的对象设置鼠标捕获,alert(this._obj.setCapture) =》function setCapture(){ [native code]}他的方法将会被继承到整个文档进行捕获
this._obj.onmousemove = function (ev) {
obj._doDrag(ev);
}
this._obj.onmouseup = function (ev) {
obj._stopDrag(ev);
}
this._obj.setCapture(); }
//其它浏览器
else {
this._doDrags = function (ev) {
obj._doDrag(ev);
}
this._stopDrags = function (ev) {
obj._stopDrag(ev);
}
document.addEventListener('mousemove', this._doDrags, true); //element.addEventListener(type,listener,useCapture); 等同于attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)
document.addEventListener('mouseup', this._stopDrags, true);
} if (this.onDragStart) { //如果对象有onDragStart方法,即调用以下函数;
this.onDragStart.call(this._obj);//函数调用方法,apply()和call(),我们可以使用它们来对this进行重置.
}
}
Drag.prototype._doDrag = function (ev) {
var oEvent = ev || event;
var l = oEvent.clientX - this._mouseStart.x + this._divStart.x;//移动的距离
var t = oEvent.clientY - this._mouseStart.y + this._divStart.y;
this._obj.style.left = l + "px";
this._obj.style.top = t + "px"; if (this.onDraging) {
this.onDraging.call(this._obj, l, t); //title 显示为当前坐标;
}
}
Drag.prototype._stopDrag = function (ev) {
if (this._obj.releaseCapture) {
alert(this._obj.releaseCapture)
this._obj.onmousemove = null;
this._obj.onmouseup = null;
this._obj.releaseCapture();
}
else {
document.removeEventListener("mousemove", this._doDrags, true);
document.removeEventListener("mouseup", this._stopDrags, true);
this._doDrags = this._stopDrags = null;
}
if (this.onDragEnd) {
this.onDragEnd.call(this._obj);
}
} </script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div> </body>
</html>

拖拽 支持ie6的更多相关文章

  1. WPF.UIShell UIFramework之自定义窗口的深度技术 - 模态闪动(Blink)、窗口四边拖拽支持(WmNCHitTest)、自定义最大化位置和大小(WmGetMinMaxInfo)

    无论是在工作和学习中使用WPF时,我们通常都会接触到CustomControl,今天我们就CustomWindow之后的一些边角技术进行探讨和剖析. 窗口(对话框)模态闪动(Blink) 自定义窗口的 ...

  2. 让您的WinForm控件快速支持拖拽文件

    实现原理:使用扩展方法. /// <summary> /// 控件扩展 /// </summary> public static class ControlExt { /// ...

  3. QTGraphics-View拖拽以及鼠标指针操作

    因为QGraphicsView继承自QWidget,它也提供了像QWidget那样的拖拽功能. 另外,为了方便,Graphics View框架也为场景以及每个item提供拖拽支持.当视图接收到拖拽事件 ...

  4. vue在移动端使用alloyfinger手势库操作图片拖拽、缩放

    最近开发一个活动需要在手机上给上传的头像加上边框.装饰,需要拖拽.手势缩放边框下的头像图片,因为是vue项目,开始尝试了vue-drag-resize这个组件,对图片拖拽支持很完美,但是无法手势缩放, ...

  5. 打造 html5 文件上传组件,实现进度显示及拖拽上传,支持秒传+分片上传+断点续传,兼容IE6+及其它标准浏览器

    老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery ...

  6. 让Web页面中的编辑器支持黏贴或直接拖拽来添加图片

    基本原理是将剪贴板中的图片二进制数据转为Base64编码 代码: <html> <head> </head> <body> <script src ...

  7. MWeb 1.4 新功能介绍一:引入文件夹到 MWeb 中管理,支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览

    之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...

  8. jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)

    最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...

  9. WinForm支持拖拽效果

    有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副本. 其实这个操作主要分成三步走 ...

随机推荐

  1. linux 的计划任务 cron

    https://serverfault.com/questions/587696/how-to-restart-php-fpm-from-cron 我也遇到了这个问题,想用cron 来启动php-fp ...

  2. 浏览器开发调试工具的秘密 - Secrets of the Browser Developer Tools

    来源:GBin1.com 如果你是一个前端开发人员的话,正确的了解和使用浏览器开发工具是一个必须的技能. Secrets of the Browser Developer Tools是一个帮助大家了解 ...

  3. Linux命令之编辑

    vi是终端命令行里功能最强的文本编辑器了,但眼下须要用到的仅仅是文本编辑功能.与GCC.make等工具的整合应用如今还不须要,所以操作难度不大,习惯就好. Linux发行版所带的一般不是vi,而是vi ...

  4. 一直加载“fonts.googleapis.com”的解决办法

    原文:http://www.tuicool.com/articles/6bayeq 最近国内对google又开始了新一轮的屏蔽,很多wordpress用户发现一个现象,那就是网站前台和后台打开都非常慢 ...

  5. Spring Boot(一)启动方式

    1.系统自动生成 SpringApplication.run(XX.class, args); 2.创建SpringApplication对象 SpringApplication app = new ...

  6. GDI+学习笔记(九)带插件的排序算法演示器(MFC中的GDI+实例)

    带插件的排序算法演示器 请尊重本人的工作成果,转载请留言.并说明转载地址,谢谢. 地址例如以下: http://blog.csdn.net/fukainankai/article/details/27 ...

  7. Vue Element Form表单时间验证控件使用

    如果直接使用Element做时间选择器,其规则(rules)不添加type:'date',会提示类型错误,处理这个需要规范值的类型为date. 时间格式化过滤器 import Vue from 'vu ...

  8. sql关于group by之后把每一条记录的详情的某个字段值合并提取的方法

    在利用group by写了统计语句之后,还有一个查看每一个记录详情的需求, 首先想到的是根据group by的条件去拼接查询条件, 但是条件有点多,拼接起来不仅麻烦,还容易出错, 所以想到要在grou ...

  9. Spring Boot(七):spring boot测试介绍

    首先maven要引入spring-boot-starter-test这个包. 先看一段代码 @RunWith(SpringRunner.class) @SpringBootTest(webEnviro ...

  10. 点滴积累【C#】---C#实现上传照片到物理路径,并且将地址保存到数据库,

    效果: 思路: 首先,获取图片物理地址,然后进行判断将图片保存到文件夹下,再将图片的信息保存到数据库. 数据库: create table image1 ( ID ,) primary key, Im ...