<!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. NIR相机

    近红外(NIR)相机——专为低照度环境而设计的高灵敏度相机 近红外光”(Near-Infrared) 是介于可见光和中红外光间的电磁波,因此是不能被人眼所察觉到的.近红外优化工业相机广泛适用于交通监控 ...

  2. Ubuntu的which、whereis、locate和find命令

    which 只能寻找执行文件 ,并在PATH变量里面寻找. whereis 从linux文件数据库(/var/lib/slocate/slocate.db)寻找,所以有可能找到刚刚删除,或者没有发现新 ...

  3. Spark RDD概念学习系列之rdd持久化、广播、累加器（十八）

    1.rdd持久化 2.广播 3.累加器 1.rdd持久化 通过spark-shell,可以快速的验证我们的想法和操作! 启动hdfs集群 spark@SparkSingleNode:/usr/loca ...

  4. Shell if else语句

    if 语句通过关系运算符判断表达式的真假来决定执行哪个分支.Shell 有三种 if ... else 语句: if ... fi 语句: if ... else ... fi 语句: if ... ...

  5. mahout算法源码分析之Collaborative Filtering with ALS-WR （四）评价和推荐

    Mahout版本:0.7,hadoop版本:1.0.4,jdk:1.7.0_25 64bit. 首先来总结一下 mahout算法源码分析之Collaborative Filtering with AL ...

  6. Android应用开发学习之Selector

    作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 本文我们来看一个通过selector动态改变ImageButton背景图片的例子,下图是该程序的运行效果: 该程序中 ...

  7. spring官方文档中文版

    转 http://blog.csdn.net/tangtong1/article/details/51326887 spring官方文档:http://docs.spring.io/spring/do ...

  8. IO（Input Output）流__字符流

    一.IO流简述------用于操作数据的 IO流用来处理设备之间的数据传输; Java对数据的操作是通过流的方式; Java用于操作流的对象都是在IO包中; 流按操作数据分为: 字节流(通用)和字符流 ...

  9. 编译C++，找不到头文件（fatal error: string: No such file or directory）

    在androidproject中编译C++时,找不到头文件,报错例如以下: fatal error: string: No such file or directory 解决该问题须要在Android ...

  10. WPF DataGrid 合并单元格

    在网上搜索wpf合并单元格,一直没搜索到,没办法,只能自己想办法搞定了.其实就是DataGrid套DataGrid,为了方便支持Column拖动,在合并的DataGridColumn那一列的Heade ...