<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS拖拽</title>
    <style>
        *{padding: 0; margin: 0; }
        .box{width: 100px;height: 100px;background: blue;position: absolute; }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        var isDown = false;
        var ObjLeft, ObjTop, posX, posY, obj,offsetX,offsetY;
        $(function(){
            obj=$("#box");
            obj.onmousedown = down;
            document.onmousemove = move;
            document.onmouseup = up;
        })
        function down(event){
            isDown=true;
            obj.style.cursor = "move";
            ObjLeft = obj.offset().left;
            ObjTop = obj.offset().top;
        }
    </script>
    <script>
        var isDown = false;
        var ObjLeft, ObjTop, posX, posY, obj,offsetX,offsetY;
        window.onload = function() {
            obj = document.getElementById('box');
            obj.onmousedown = down;
            document.onmousemove = move;
            document.onmouseup = up;
        }
        function down(event) {
            obj.style.cursor = "move";
            isDown = true;
            ObjLeft = obj.offsetLeft;
            ObjTop = obj.offsetTop;
            posX = parseInt(mousePosition(event).x);
            posY = parseInt(mousePosition(event).y);
            offsetX=posX-ObjLeft;
            offsetY=posY-ObjTop;
        }
        function move(event) {
            if (isDown == true) {
                var x=mousePosition(event).x-offsetX;
                var y=mousePosition(event).y-offsetY;
                var w = document.documentElement.clientWidth - obj.offsetWidth;
                var h = document.documentElement.clientHeight - obj.offsetHeight;
                console.log(x + ',' + y);
                x=Math.min(w,Math.max(0,x));
                y=Math.min(h,Math.max(0,y));
                obj.style.left = x + 'px';
                obj.style.top = y + 'px';
            }
        }

        function up() {
            isDown = false;
        }

        function mousePosition(evt) {
            var xPos, yPos;
            evt = evt || window.event;
            if (evt.pageX) {
                xPos = evt.pageX;
                yPos = evt.pageY;
            } else {
                xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
                yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;
            }
            return {
                x: xPos,
                y: yPos
            }
        }
    </script>
</head>
<body>
<div id="box" class="box"></div>
</body>
</html>

JavaScript拖拽的更多相关文章

  1. Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理

    我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...

  2. Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理

    今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...

  3. Javascript 拖拽雏形中的一些问题——逐行分析代码，让你轻松了解拖拽的原理

    今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript&q ...

  4. javascript——拖拽（完整兼容代码）

    拖拽,是JS经常会用到的效果,在网上有很多的这样那样的拖拽效果,但其中往往大多有各种各养的问题,功能不全,无法兼容,而且修改的时候 也是十分麻烦. 其实拖拽的原理很简单,无非是鼠标的三个动作的解析,以 ...

  5. Javascript 拖拽雏形——逐行分析代码，让你轻松了解拖拽的原理

    拖拽的原理: 其实就是鼠标与左上角的距离保持不变.我们来看下图, 这红点就是鼠标. 拖拽拖拽实际上来说就是通过鼠标的位置来计算物体的位置,就是这么简单,就是这么任性. 那这个距离怎么求呢?? 鼠标的位 ...

  6. javascript 拖拽事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. day52—JavaScript拖拽事件的应用（自定义滚动条）

    转行学开发,代码100天——2018-05-07 前面的记录里展示了JavaScript中鼠标拖拽功能,今天利用拖拽功能实现另一个应用场景——自定义滚动条(作为控制器)的用法. 常通过自定义滚动条控制 ...

  8. html --- canvas --- javascript --- 拖拽圆圈

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  9. 每日分享！～ JavaScript(拖拽事件）

    浏览器的拖拉事件 拖拉(drag)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括元素节点.图片.链接.选中的文字等等.在网页中 ...

随机推荐

  1. mysql 备份与还原

    http://dev.yesky.com/281/35291281.shtml 每一种逻辑错误发生的概率都极低,但是当多种可能性叠加的时候,小概率事件就 放大成很大的安全隐患,这时候备份的必要性就凸显 ...

  2. Altium Designer6打印PCB 设置

    1.File-->Page Setup     Printer Paper一栏是打印纸的设置,不再罗嗦.     主要是Scaling一栏:ScaleMode项选择:ScaledPrint    ...

  3. hdoj 1269 迷宫城堡【scc基础题目】

    迷宫城堡 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  4. IIS- ASP站点布署时查看ASP错误信息

    ASP使用的脚本是VBSCRIPT,布置的时候想显示他的错误信息,可以在INTERNET选项里把显示友好http错误信息的勾去掉 就能查看ASP布署时查看错误信息的勾去掉.

  5. Java编程性能优化一

    转自:http://my.oschina.net/xianggao/blog/77224 在JAVA程序中,性能问题的大部分原因并不在于JAVA语言,而是程序本身.养成良好的编码习惯非常重要,能够显著 ...

  6. eclipse package,source folder,folder区别及相互转换

    今天遇到一个问题:在com.a.b.c这个包路径下建一个package,但是不知为什么就会自动编程folder,而且在这个“package”下的所有property文件读不到.所以看了一下文章:在ec ...

  7. Spring 4.x org.springframework.http.converter.json.MappingJacksonHttpMessageConverter ClassNotFoundException:

    Spring 4.x The first major version of Jackson is no longer supported in Spring 4. The class you want ...

  8. C# richTextBox封装的一个打印的类

    附件 http://files.cnblogs.com/xe2011/CSharpWinForm_richTextBoxPrintClass.rar 在窗体上一个Richtextbox 控件 和3个按 ...

  9. [ES7] Descorator: evaluated & call order

    When multiple decorators apply to a single declaration, their evaluation is similar to function comp ...

  10. 软件项目量化管理（CMMI高成熟度）实践经验谈——之项目管理过程策划篇

    续:软件项目量化管理(CMMI高成熟度)实践经验谈--之概述篇 二.项目管理过程 软件开发项目管理过程,从项目全视角来看,分为售前.售中.售后等三个大的阶段.本文所谈的是售中阶段项目管理过程,在售中阶 ...