基础知识

event.clientX、event.clientY

鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

event.pageX、event.pageY

类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。

event.offsetX、event.offsetY

鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。

event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性


实现效果

web qq页面上的元素基本都可以拖拽,交互性很强,增强了体验,拖拽功能带来的好处显而易见。

思路:

用户点击元素,然后拖动,实际上是onmousedown和onmousemove两个函数的嵌套。

1、用户点击元素。需要记录到鼠标点击位置的距离,因为在拖动过程中最好是保持鼠标和元素的相对距离,而不是鼠标一直处于元素左上角,用过拖拽应该都能体会。

由于没有斜线的说法,所以是保存横向距离distX和纵向距离distY两个变量。

2、拖动元素。这时候就要发挥之前保存的距离了,元素的位置是由left和top决定的,在运动过程中是不断变化的,是需要我们计算的,计算方法就是:鼠标的位置-元素边距到鼠标的距离。就成功可以拖动了。

3、虽然可以拖动了,但是元素可能会被疯狂的用户拖出可视区,可能就找不到了,所以我们最好加一个限定,不能拖出可视区。

左边距的控制好说,判断使left=0;右边距=0是一个想法,具体的实现还是要根据左边距来控制,首先得到可视区宽度(document.documentElement.clientWidth),减去元素宽度就是元素的left值。

css

  1. <style type="text/css">
  2. #div{
  3. background: red;
  4. width: 100px;
  5. height: 100px;
  6. position: absolute;
  7. }
  8. </style>
  1. <script type="text/javascript">
  2. window.onload=function(){
  3. var oDiv=document.getElementById('div');
  4. var distX=0;
  5. var distY=0;
  6. oDiv.onmousedown=function(ev){
  7. var oEvent=ev||event;
  8. distX=oEvent.clientX-oDiv.offsetLeft; //获取边界到鼠标的距离
  9. distY=oEvent.clientY-oDiv.offsetTop;
  10. document.onmousemove=function(ev){
  11. var oEvent=ev||event;
  12. var x=oEvent.clientX-distX;
  13. var y=oEvent.clientY-distY;
  14. if(x<0){
  15. x=0;
  16. }
  17. if(y<0){
  18. y=0;
  19. }
  20. if(x>(document.documentElement.clientWidth-oDiv.offsetWidth))
  21. {
  22. x=document.documentElement.clientWidth-oDiv.offsetWidth;
  23. }
  24. oDiv.style.left=x+'px'; //根据鼠标位置相对定位,得到left,top值
  25. oDiv.style.top=y+'px';
  26. }
  27. document.onmouseup=function(){
  28. document.onmousemove=null;
  29. document.onmouseup=null;
  30. }
  31. }
  32.  
  33. }
  34. </script>
  1. <body>
  2. <div id="div"></div>
  3. </body>

js 鼠标拖拽元素的更多相关文章

  1. js 鼠标拖拽元素移动

    <!DOCTYPE html><html> <head> <title> </title> <style media="sc ...

  2. js鼠标拖拽

    html <div id="box"> </div> css ;;} #box{width:200px;height:200px;background:cy ...

  3. js 鼠标拖拽效果实现

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. 关于js拖拽功能,拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题

    被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...

  5. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  6. js - 面向对象 - 小案例:轮播图、随机点名、选项卡、鼠标拖拽

    面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...

  7. JavaScript实现拖拽元素对齐到网格(每次移动固定距离)

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...

  8. juqery 拖拽元素

    转自  http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html 因为怕博主删除博客,所以复制过来! JQuery UI是JQue ...

  9. jQuery 鼠标拖拽排序

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. Mercurial(Hg)基本操作

    Mercurial(Hg)基本操作 来源 https://www.cnblogs.com/gb2013/archive/2012/05/18/Mercurial_Basic.html Mercuria ...

  2. Python解惑:整数比较

    在 Python 中一切都是对象,毫无例外整数也是对象,对象之间比较是否相等可以用==,也可以用is.==和is操作的区别是: is比较的是两个对象的id值是否相等,也就是比较俩对象是否为同一个实例对 ...

  3. 机器学习工作流程第一步:如何用Python做数据准备?

    这篇的内容是一系列针对在Python中从零开始运用机器学习能力工作流的辅导第一部分,覆盖了从小组开始的算法编程和其他相关工具.最终会成为一套手工制成的机器语言工作包.这次的内容会首先从数据准备开始. ...

  4. 自学Linux Shell5.1-shell父子关系

    点击返回 自学Linux命令行与Shell脚本之路 5.1-shell父子关系 1 shell常见的种类  bash是Linux标准默认的Shell,是BunrneAgain Shell的缩写,内部命 ...

  5. CodeForces 464E The Classic Problem | 呆克斯歘 主席树维护高精度

    题意描述 有一个\(n\)点\(m\)边的无向图,第\(i\)条边的边权是\(2^{a_i}\).求点\(s\)到点\(t\)的最短路长度(对\(10^9 + 7\)取模). 题解 思路很简单--用主 ...

  6. 软Raid5制作

    以raid5为例: 1.添加4块磁盘要求:容量.转速.接口一样的硬盘. 2.创建分区并修改ID[root@localhost ~]# fdisk /dev/sdb[root@localhost ~]# ...

  7. 分数拆分(Fractions Again?!, UVa 10976)

    题目链接:https://vjudge.net/problem/UVA-10976 It is easy to see that for every fraction in the form 1k(k ...

  8. Java_io体系之RandomAccessFile简介、走进源码及示例——20

    Java_io体系之RandomAccessFile简介.走进源码及示例——20 RandomAccessFile 1.       类功能简介: 文件随机访问流.关心几个特点: 1.他实现的接口不再 ...

  9. easyui-treegrid的案例

    1.前台html <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  10. Quadratic.java

    /****************************************************************************** * Compilation: javac ...