基础知识

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

<style type="text/css">

    #div{

        background: red;

        width: 100px;

        height: 100px;

        position: absolute;

    }

</style>  
<script type="text/javascript">

    window.onload=function(){

        var oDiv=document.getElementById('div');

        var distX=0;

        var distY=0;

        oDiv.onmousedown=function(ev){

            var oEvent=ev||event;

            distX=oEvent.clientX-oDiv.offsetLeft;   //获取边界到鼠标的距离

            distY=oEvent.clientY-oDiv.offsetTop;

            document.onmousemove=function(ev){

                var oEvent=ev||event;

                var x=oEvent.clientX-distX;

                var y=oEvent.clientY-distY;

                if(x<0){

                    x=0;

                }

                if(y<0){

                    y=0;

                }

                if(x>(document.documentElement.clientWidth-oDiv.offsetWidth))

                {

                    x=document.documentElement.clientWidth-oDiv.offsetWidth;

                }

                oDiv.style.left=x+'px';    //根据鼠标位置相对定位，得到left，top值

                oDiv.style.top=y+'px';

            }

            document.onmouseup=function(){

                document.onmousemove=null;

                document.onmouseup=null;

            }

        }  

    }

</script>  
<body>

    <div id="div"></div>

</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. day6 三级菜单

    #__author__: Administrator #__date__: 2018/7/12 china = { "shandong":{ "linyi":[ ...

  2. day10 前向引用

    风湿理论,函数即变量.没定义没加载(开辟内存空间).都是没法用的 不定义调用必然出错 def foo(): print("from foo") bar () # 标红 foo() ...

  3. 洛谷P2900 [USACO08MAR]土地征用Land Acquisition（动态规划，斜率优化，决策单调性，线性规划，单调队列）

    洛谷题目传送门 用两种不一样的思路立体地理解斜率优化,你值得拥有. 题意分析 既然所有的土地都要买,那么我们可以考虑到,如果一块土地的宽和高(其实是蒟蒻把长方形立在了平面上)都比另一块要小,那么肯定是 ...

  4. Leetcode 326.3的幂 By Python

    给定一个整数,写一个函数来判断它是否是 3 的幂次方. 示例 1: 输入: 27 输出: true 示例 2: 输入: 0 输出: false 示例 3: 输入: 9 输出: true 示例 4: 输 ...

  5. 自学Zabbix4.1 zabbix监控web服务器访问性能

    自学Zabbix4.1 zabbix监控web服务器访问性能 使用Zabbix实现对web性能的监控,通过它可以了解web站点的可用性以及性能.最终将各项指标绘制到图形中,这样我们可以了解到一个站点的 ...

  6. 自学Python2.8-条件(if、if...else）

    自学Python之路 自学Python2.8-条件(if.if...else) 1.if 判断语句 if语句是用来进行判断的,其使用格式如下:  if 要判断的条件: 条件成立时,要做的事情 当“判断 ...

  7. 架构师成长之路3.1-Cobber原理及部署

    点击返回架构师成长之路 架构师成长之路3.1-Cobber原理及部署 Cobbler是一个Linux服务器安装的服务,可以通过网络启动(PXE)的方式来快速安装.重装物理服务器和虚拟机,同时还可以管理 ...

  8. BZOJ4332 JSOI2012 分零食 【倍增 + NTT】

    题目链接 权限题BZOJ4332 题解 容易想到\(dp\) 设\(g[i][j]\)表示前\(i\)人分到\(j\)颗糖的所有方案的乘积之和 设\(f(x) = Ox^2 + Sx + U\) \[ ...

  9. source、sh、bash

    source.sh.bash../ 执行脚本的区别 1.source命令用法: source FileName 作用:在当前bash环境下读取并执行FileName中的命令.该filename文件可以 ...

  10. nowcoder172C 保护 (倍增lca+dfs序+主席树)

    https://www.nowcoder.com/acm/contest/172/C (sbw大佬太强啦 orz) 先把每一个路径(x,y)分成(x,lca),(y,lca)两个路径,然后就能发现,对 ...