主要原理：

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. Spinner使用一

    Spinner使用一 一.使用方法 1.在layout中创建Spinner控件 <Spinner android:id="@+id/spinner1" android:lay ...

  2. jsp: jstl标签库

    jstl标签库,通过maven配置: <!-- jstl标签的支持 --> <dependency> <groupId>javax.servlet</grou ...

  3. unity监测按下键的键值并输出+unity键值

    using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using U ...

  4. Asp.net 检测到有潜在危险的 Request.From值

    因为Asp.net对客户端提交的数据进行了基本的安全验证,检测是否有最基础的 sql注入 或者 xss跨站脚本攻击代码. 如果你提交了:</div><script type=&quo ...

  5. C# 6.0 编译器

    C# 6.0编译器:可以将csc.exe所在位置 C:\Program Files (x86)\MSBuild\14.0\Bin 添加到Path环境变量. C:\>csc Microsoft ( ...

  6. Spring boot临时文件目录报错

    基本的错误信息如下: 2018-03-05 at 15:12:03 CST ERROR org.apache.juli.logging.DirectJDKLog 181 log - Servlet.s ...

  7. 奔跑吧，OpenStack现场分享：超融合架构如何抹平物理硬件差异？

    转自:https://www.ustack.com/blog/moping/ “通过引入OpenStack这一中间层,实现了云平台统一的管理调度支配向上交付,解决了业务的灵活性问题.但是在抹平下层物理 ...

  8. LeetCode OJ：Populating Next Right Pointers in Each Node II（指出每一个节点的下一个右侧节点II）

    Follow up for problem "Populating Next Right Pointers in Each Node". What if the given tre ...

  9. PHPEMS在线模拟考试系统 v4.2

    官网地址 :http://www.phpems.net/ 下载地址 : http://www.phpems.net/index.php?content-app-content&contenti ...

  10. JavaScript--收藏栏添加按钮，放大hdu题目字体

    觉得HDOJ的题目字体太小了,一波小操作 在收藏栏添加:添加网页->网址改为: javascript: void((function() { var element = document.get ...