主要原理：

1、当鼠标按下时，记录鼠标坐标，用到的是 onmousedown；

2、当鼠标移动时，计算鼠标移动的坐标之差，用到的是 onmousemove；

3、当鼠标松开时，清除事件，用到的是 onmouseup；

了解的知识：

1、div 的 offsetLeft 与 style.left 的区别：

http://longxu1314.blog.163.com/blog/static/2112990412013101814844444/

效果图如下：

突然发现有没有效果图都一样哈哈，不说废话了，上代码：

html代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf8">
    <title>js拖拽效果</title>
    <style type="text/css">
    #div1 {
        width : 200px;
        height: 200px;
        position: absolute;
        background: #99dd33;
        cursor: move;
    }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
<script type="text/javascript">
    // js代码
</script>
</html>

js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
window.onload  function() {
    var disX = disY = 0;                         // 鼠标距离div的左距离和上距离
    var div1 = document.getElementById("div1");  // 得到div1对象
     
    // 鼠标按下div1时
    div1.onmousedown = function(e) {
        var evnt = e || event;                   // 得到鼠标事件
        disX = evnt.clientX - div1.offsetLeft;   // 鼠标横坐标 - div1的left
        disY = evnt.clientY - div1.offsetTop;    // 鼠标纵坐标 - div1的top
         
        // 鼠标移动时
        document.onmousemove = function(e) {
            var evnt = e || event;
            var x = evnt.clientX - disX;
            var y = evnt.clientY - disY;
            var window_width  = document.documentElement.clientWidth  - div1.offsetWidth;
            var window_height = document.documentElement.clientHeight - div1.offsetHeight;
             
            x = ( x < 0 ) ? 0 : x;                          // 当div1到窗口最左边时
            x = ( x > window_width ) ? window_width : x;    // 当div1到窗口最右边时
            y = ( y < 0 ) ? 0 : y;                          // 当div1到窗口最上边时
            y = ( y > window_height ) ? window_height : y;  // 当div1到窗口最下边时
             
            div1.style.left = x + "px";
            div1.style.top  = y + "px";
        };
         
        // 鼠标抬起时
        document.onmouseup = function() {
            document.onmousemove =null;
            document.onmouup = null;
        };
         
        return false;
    };
};

js实现鼠标拖拽的更多相关文章

  1. JS Event 鼠标拖拽事件

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

  2. js实现鼠标拖拽div-------Day44

    假设去问这样一个问题"你认为鼠标操作简单,还是键盘操作简单",相信会有多数人都会回答鼠标吧,毕竟键盘button那么多,假设手小了或者手法不规范了,太easy出问题了,也对操作的速 ...

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

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

  4. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

  5. 完美实现鼠标拖拽事件，解决各种小bug，基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

  6. CSharpGL(20)用unProject和Project实现鼠标拖拽图元

    CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...

  7. JavaScript鼠标拖拽特效及相关问题总结

    #div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;bac ...

  8. 【狼】unity 鼠标拖拽物体实现任意角度自旋转

    主要涉及函数 Input.GetAxis(“Mouse x”) 可取得鼠标横向(x轴)移动增量 Input.GetAxis(“Mouse y”) 可取得鼠标竖向(y轴)移动增量 通过勾股定理获取拖拽长 ...

  9. NGUI对象跟随鼠标拖拽移动

    public Camera WNGUICamera; Vector3 _WoldPosition;//指针的初始位置 // Vector3 _WoldAng; Vector3 WscreenSpace ...

随机推荐

  1. Azure新建的CentOS设置root账户的密码

    前言:Azure在新建VM的时候的账户使用的是自定义的用户名和密码或者自定义的用户名使用公钥 1.使用自定义的用户名登录到服务器. 2.设置root的密码: sudo passwd root 3.按照 ...

  2. pthread_getspecific()--读线程私有数据|pthread_setspecific()--写线程私有数据

    原型: #include <pthread.h> void *pthread_getspecific(pthread_key_t key); int pthread_setspecific ...

  3. hihocoder#1148 : 2月29日 计算闰年的个数

    计算到某年为止的闰年数,其实很简单.设要计算的年为A,则到A年为止(含A年)的闰年数为: 闰年数=INT(A/)-INT(A/)+INT(A/) 这里:INT为取整数函数 #include <c ...

  4. UVA - 1602 Lattice Animals (暴力+同构判定)

    题目链接 题意:求能放进w*h的网格中的不同的n连通块个数(通过平移/旋转/翻转后相同的算同一种),1<=n<=10,1<=w,h<=n. 刘汝佳的题真是一道比一道让人自闭.. ...

  5. net Core 2.1新功能Generic Host(通用主机)

    net Core 2.1新功能Generic Host(通用主机) http://doc.okbase.net/CoderAyu/archive/301859.html 什么是Generic Host ...

  6. C++语言对C的增强（2）—— const增强、枚举的增强

    1.const基础知识 #include <iostream> int main(void) { //const定义常量--->const意味着只读 const int a; int ...

  7. vim直接编辑远程文件

    本文由Suzzz原创,发布于http://www.cnblogs.com/Suzzz/p/4116341.html,转载请保留此声明. Linux环境下 vim scp://user@hostIP/P ...

  8. HIVE-执行distribute by时报错的解决过程---之如何分析hive执行的错误并解决

    在执行一条HIVE语句的时候报了以下错误,重新检查了所有步骤,重启所有服务,发现没有问题. 但发现一个有趣的事情 1,select sno,sname,sex,sage,sdept from stud ...

  9. bzoj 3398 [Usaco2009 Feb]Bullcow 牡牛和牝牛——前缀和优化dp / 排列组合

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3398 好简单呀.而且是自己想出来的. dp[ i ]表示最后一个牡牛在 i 的方案数. 当前 ...

  10. Zabbix配置微信报警通知

    Zabbix告警可以通过邮件,微信,电话,短信等方式发送告警消息. 电话和短信需要向运营商购买相应的网关,需要付费: 邮件和微信是免费的,可以根据业务需要选择相应的告警模式 Zabbix版本:3.2 ...