<!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. Java的MongoDB驱动及读写策略

    网上看见一篇博文,详细讲了MongoDB读写策略,将来生产会遇到类似的问题,转来备查. 指定新mongo实例: Mongo m = new Mongo(); Mongo m = new Mongo( ...

  2. LCS算法

    转自:http://hzzy-010.blog.163.com/blog/static/79692381200872024242126/  好详细~~~也十分好理解~~~ 最长公共子序列问题(非连续的 ...

  3. Android应用开发学习之列表视图

    作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 列表视图我们会经常用到,可以通过两种方式来创建列表视图,一种方式是直接使用ListView组件创建,另一种方式是通过 ...

  4. 笔记本开了WIFI之后只能上QQ，上不了网页的解决方法

    前几天拉了宽带之后,开了WIFI,发现WIFI能上网,但是电脑就上不了网页. 把本地连接的DNS指定一下,(电信)指定为202.102.192.68

  5. WinForm TextBox自定义扩展方法数据验证

    本文转载:http://www.cnblogs.com/gis-crazy/archive/2013/03/17/2964132.html 查看公司项目代码时,存在这样一个问题:winform界面上有 ...

  6. varchar（n）和varchar(max)有什么区别

    如果列数据项的大小一致,则使用 char. 如果列数据项的大小差异相当大,则使用 varchar. 如果列数据项大小相差很大,而且大小可能超过 8,000 字节,请使用 varchar(max).

  7. PureMVC(JS版）源码解析（四）：Notifier类

         上一篇博客中,我们解析了Observer(观察者)类,这一篇博客我们来讲Notifier(通知着)类.关于Notifier类,源码注释上有这么一段: * @class puremvc.Not ...

  8. Ubuntu开机启动svn

    一.创建脚本 $cd /etc/init.d/$sudo vim svnserve 内容如下#! /bin/shsudo svnserve -d -r /home/svn 二.脚本权限设置 sudo ...

  9. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

  10. jquery插件select2事件不起作用（select2-3.5.4）

    jquery插件select2事件不起作用 >>>>>>>>>>>>>>>>>>>&g ...