javascript事件类型之界面拖拽交互
一、在线DEMO
aaarticlea/png;base64,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" alt="" />
思路：鼠标移动的距离就是元素要移动的距离，所以关键点就是要得到鼠标点击元素时的
坐标和鼠标移动以后释放时的鼠标的坐标。
1.点击元素事件处理，确定移动元素和鼠标的位置。用鼠标事件中的onmousedown方法获取鼠标点击元素时的坐标。
2.鼠标移动时的事件处理。用鼠标事件中的onmousemove方法获取鼠标移动时的坐标。
3.松开元素的事件处理。用鼠标事件中的onmouseup方法来处理鼠标松开时元素位置不再跟随鼠标移动的动作。
Firefox亲测：onmousedown、onmousemove、onclick事件对象里面都有clientX（Y）、pageX（Y）、screenX（Y）这三个属 性。
二、关于事件对象中的clientX（Y）、pageX（Y）、screenX（Y）、offsetX（Y）的区别
aaarticlea/png;base64,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" alt="" />
关于clientX（Y）、pageX（Y）、screenX（Y）我有如下总结：
screenX >clientX = pageX
screenY>pageY>=clientY（当页面没有滚动的时候pageY和clientY相等)
三、测试代码
IE事件中没有pageX（Y）事件，但是可以通过分别获取clientX（Y）、scrollLeft（Top）的值之后将两者相加得到pageX（Y）。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 50px;
height: 200px;
margin-top: 100px;
background-color: #6090B6;
}
</style>
</head> <body>
<div id="main">
<button id="btn">确定</button>
<div id="div1"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
<script>
var EventUtil = {
//事件处理
addHandler: function(element, type, handler) {
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else if(element.addEvent) {
//ie9之前的浏览器的事件监听方式，和上面的方式不一样
//attachEvent中的事件类型前有一个on
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}, //ie8即更早版本只支持事件冒泡，ie中使用attachEvent
//事件处理程序会在全局作用域中运行，所以回调函数中的this等于window，
//而不是当前点击的元素
getEvent: function(event) {
return event ? event : window.event;
}, //获取目标对象，即当前被点击的元素IE中用event.srcElement获取
getTarget: function(event) {
return event.target || event.srcElement;
}, preventDefault: function(event) {
if(event.preventDefault) {
event.preventDefault();
} else { //IE
event.returnValue = false;
}
}, removeHandler: function(element, type, handler) {
if(element.removeHandler) {
element.removeListener(type, handler, false);
} else if(element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}, stopPropagation: function(event) {
//stopPropagation() 可以同时取消捕获或冒泡
if(event.stopPropagation) {
event.stopPropagation();
} else { //IE只能需要冒泡
event.cancelBubble = true;
}
}
}; document.onmousemove = function(event) {
var e = EventUtil.getEvent(event);
//不包括页面滚动距离，不是鼠标的实际位置
console.log("------------鼠标移动----------------------");
console.log("页面坐标位置：" + e.pageX + " " + e.pageY);
console.log("客户区坐标：" + e.clientX + " " + e.clientY);
console.log("屏幕坐标：" + e.screenX + " " + e.screenY);
};
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++) {
var div = divs[i];
EventUtil.addHandler(div, "click", function(event) {
//EventUtil.addHandler(div, "mousedown", function(event) {
var e = EventUtil.getEvent(event);
var pageX = e.pageX,
pageY = e.pageY; //支持IE浏览器 获取鼠标当前坐标
if(pageX === undefined) {
//document.body混杂模式 document.documentElement标准模式
pageX = e.clientX + (document.body.scrollLeft ||
document.documentElement.scrollLeft);
}
if(pageY === undefined) {
pageY = e.clientY + (document.body.scrollTop ||
document.documentElement.scrollTop);
} console.log("-------------元素被点击之后-----------------");
console.log("页面坐标位置：" + pageX + " " + pageY);
console.log("客户区坐标：" + e.clientX + " " + e.clientY);
console.log("屏幕坐标：" + e.screenX + " " + e.screenY);
e.stopPropagation();//阻止冒泡
});
} </script> </html>
javascript事件类型之界面拖拽交互的更多相关文章
- JavaScript事件类型
JavaScript事件类型 Web浏览器中可能发生的事件有很多类型.这里我将主要将下面几种常用的事件类型: UI事件 焦点事件 鼠标与滚轮事件 键盘与文本事件 复合事件 变动事件 HTML5事件 设 ...
- 第一百三十七节，JavaScript，封装库---修缮拖拽
JavaScript,封装库---修缮拖拽 修缮拖拽 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:有参设置拖拽点区块,只有弹窗的这个拖拽点区块才能拖拽,无参整个弹窗可以拖 ...
- 基于WebForm+EasyUI的业务管理系统形成之旅 -- 首页Portal界面拖拽(Ⅵ)
上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 构建Web界面>,主要介绍系统界面布局.导出数据等. 本篇将介绍首页Portal界面拖拽. 一.首页Portal界面拖拽 ...
- JavaScript的事件对象_实现拖拽
实现拖拽一个元素 拖拽的流程: 当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove 当鼠标松开时,被拖拽元素固定在当前位置 onm ...
- JavaScript实现最简单的拖拽效果
一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...
- Javascript写的一个可拖拽排序的列表
自己常试写了一个可拖拽进行自定义排序的列表,可能写的不太好,欢迎提供意见. 我的思路是将列表中的所有项都放进一个包裹层,将该包裹层设为相对定位,每当点击一个项时,将该项脱离文档并克隆一份重新添加到文档 ...
- 拖拽事件--select外边框拖拽
地图上面的搜索框要可拖拽 但是搜索框是有点击事件的,点击显隐下拉菜单,如果拖拽的事件源选择select框的话,会有样式(十字拖动符cursor:move与selelt默认点击的箭头)冲突 思索良久,就 ...
- JavaScript实现网页元素的拖拽效果
以下的页面中放了两个div,能够通过鼠标拖拽这两个元素到任何位置. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2ZydWVk/font/5a6 ...
- 用JavaScript实现div的鼠标拖拽效果
实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class=&qu ...
随机推荐
- 《高级Web应用程序设计》课程学习资料
任务1:什么是ASP.NET MVC 1.1 ASP.NET MVC简介 1.2 认识ASP.NET MVC项目结构 1.3 ASP.NET MVC生命周期 任务2:初识ASP.NET MVC项目开 ...
- java.util.logging.Logger 使用详解
概述: 第1部分 创建Logger对象 第2部分 日志级别 第3部分 Handler 第4部分 Formatter 第5部分 自定义 第6部分 Logger的层次关系 参考 第1部分 创建Logger ...
- 51nod 1051 最大子矩阵和（dp）
题目链接:51nod 1051 最大子矩阵和 实质是把最大子段和扩展到二维.读题注意m,n... #include<cstdio> #include<cstring> #inc ...
- ABAP认识
ABAP是一种高级企业应用编程语言(Advanced Business Application Programming),起源于20世纪80年代.经过不断的发展,现在的版本为ABAP/4,SAP R/ ...
- Octopus系列之模板快速开发手册
公共代码 html_header_1 <title>${sitename}-${seotitle}</title> <meta http-equiv="Cont ...
- JAVA 集合List、Map、Set
Collection(接口) Set(接口) HashSet(类) … List(接口) ArrayList(类) Vector(类) LinkedList(类) … Map(接口) HashMap( ...
- MagicalRecord的使用(第三方库实现的数据库)
MagicalRecord:http://cocoadocs.org/docsets/MagicalRecord/2.1/ 安装: 1.新建一个工程,注意不要勾选 Core Data. 2.利用Coc ...
- 关于uboot和kernel的一些理解
经过多次的修改和实验,终于能够在mini2440开发板上进行各种uboot和kernel的挂载实验了,在此期间学习到了很多知识,也理解了一些知识1->分区uboot和kernel的分区表要一致u ...
- hive的Query和Insert，Group by，Aggregations（聚合）操作
1.Query (1)分区查询 在查询的过程中,采用那个分区来查询是通过系统自动的决定,但是必须是在分区列上基于where子查询. SELECT page_views.* FROM page_view ...
- 关于ASP.NET页面打印技术的总结【转】
B/S结构导致了Web应用程序中打印的特殊性. • 程序运行在浏览器中,打印机在本地,而文件确可能在服务器上,导致了打印控制不是很灵活. • 格式如何控制和定制等,是我们开发中可能会面对的问题. 打印 ...