event.pageY和event.pageX
event.pageY 属性返回鼠标指针的位置,相对于文档的上边缘。
提示:该事件属性通常与 event.pageX属性一起使用。(简写:e.pageY(或者e.pageX))
实例:
drag
首先我创建一个盒子drag
.drag{ height: 100px; width: 100px; position:absolute; background:#0000CC; top:100px;left:200px; padding:; } <div class="drag"></div>
效果图
jq代码
$(document).ready(function(){ var move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(".drag").mousedown(function(e){ move=true; _x=e.pageX-parseInt($(".drag").css("left")); _y=e.pageY-parseInt($(".drag").css("top")); }); $(document).mousemove(function(e){ if(move){ x=e.pageX-_x;//控件左上角到屏幕左上角的相对位置 y=e.pageY-_y; $(".drag").css({"top":y,"left":x}); } }).mouseup(function(){ move=false; }); });
效果:
event.pageY和event.pageX的更多相关文章
- event.clientX和event.clientY
event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX ...
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
- Js event对象offsetX,pageX,screenX,clientX详解
平时在测量元素位置时难以确定,下面给出具体的event对象中的各种属性,以便日后使用. 检测相对于浏览器的位置:clientX和clientY 当鼠标事件发生时,鼠标相对于浏览器左上 ...
- event和window.event
type:事件的类型,如onlick中的click:srcElement/target:事件源,就是发生事件的元素:button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下 ...
- event.srcElement ,event.fromElement,event.toElement
自然,我们都习惯了 IE,在 IE 中要在函数中获得各事件对象很容易,直接用 event.event.srcElemtn.event.fromElement.event.toElement 就行了.在 ...
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- Javascript中event.srcElement和event.target的区别
event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称.注意获取的标记都以大写表示,如"TD",&qu ...
- event.keyCode ,event.which ,event.charCode (2016-12-27 16:17:16)
javascript判断是否按回车键 <input id="chatMsg" name="chatMsg" type="text" s ...
- 【前端】event.target 和 event.currentTarget 的区别
event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...
随机推荐
- 关于Reapter多重嵌套的详细补充
<asp:Repeater ID ="rptfour" runat ="server" OnItemDataBound="two_Bind&qu ...
- NBUT 1457 Sona(莫队算法+离散化)
[1457] Sona 时间限制: 5000 ms 内存限制: 65535 K 问题描述 Sona, Maven of the Strings. Of cause, she can play the ...
- 移动Web单页应用开发实践——实现Pull to Request(上/下拉请求操作)
在单页应用开发中,无论是页面结构化,还是Pull to Request,都离不开一个技术——页面局部滚动.当下的移动web技术,主要使用下面两种方式实现局部区域的滚动: 基于IScroll组件,也有很 ...
- Apache Spark源码走读之13 -- hiveql on spark实现详解
欢迎转载,转载请注明出处,徽沪一郎 概要 在新近发布的spark 1.0中新加了sql的模块,更为引人注意的是对hive中的hiveql也提供了良好的支持,作为一个源码分析控,了解一下spark是如何 ...
- P4factory <Integration with Mininet>
在终端A进入simple_router目录,make bm之后,执行 ./run_demo.bash 成功和Mininet进行协作: *** Creating network *** Adding h ...
- 浏览器 user-agent 字符串的故事
你是否好奇标识浏览器身份的User-Agent,为什么每个浏览器都有Mozilla字样? 故事还得从头说起,最初的主角叫NCSA Mosaic,简称Mosaic(马赛克),是1992年末位于伊利诺伊大 ...
- RT-Thread信号量实际运用—按键点灯
上面是魔笛开发板上 LED 和按键的 IO 分布,我们通过信号量的方法来同步按键线程和LED 线程,实现当 enter 键按下后,点亮或关闭 LED 的动作. /******************* ...
- oracle 内联同时删除多表
在 MySql 中,内联同时删除多表可以使用这样的语法: DELETE t1,t2 FROM table1 AS t1 INNER JOIN table2 t2 ... INNER JOIN tabl ...
- miniproject black jack--Fail
第一部分 下载这个小项目的程序模板并回顾card类的定义.这个类已经执行了所以你的任务是自己熟悉下代码.开始,通过粘贴card类定义到程序模板中并验证我们的代码如预期那样工作. 实现“__init__ ...
- Java多态性理解
Java中多态性的实现 什么是多态 面向对象的三大特性:封装.继承.多态.从一定角度来看,封装和继承几乎都是为多态而准备的.这是我们最后一个概念,也是最重要的知识点. 多态的定义:指允许不同类的对 ...