<!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. [bzoj\lydsy\大视野在线测评]题解(持续更新）

    目录: 一.DP 二.图论 1.最短路 2.强连通分量 三.利用单调性维护 四.贪心 五.数据结构 1.并查集 六.数学 1.计数问题 2.数学分析 七.博弈 八.搜索 /////////////// ...

  2. linux下如何执行PHP脚本

    Linux 下如何直接执行 php 脚本? 下面是部分 php 命令行参数. 用法 php [-q] [-h] [-s] [-v] [-i] [-f ] | { [args...]} -q 安静模式, ...

  3. hdoj 1556 Color the ball【线段树区间更新】

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  4. http协议和web本质

    转载:http://www.cnblogs.com/dinglang/archive/2012/02/11/2346430.html http协议和web本质 当你在浏览器地址栏敲入“http://w ...

  5. PHP环境配置综合篇

    1.WNMP: http://www.wnmp.com.cn/     En: https://www.getwnmp.org/ 2.xampp:https://www.apachefriends.o ...

  6. Kerberos验证过程

    参考文献: How the Kerberos Version 5 Authentication Protocol Works: Logon and Authentication SQL Kerbero ...

  7. FM笔记

    1.获取生产订单状态 CALL FUNCTION 'STATUS_TEXT_EDIT' EXPORTING client = sy-mandt objnr = p_objnr spras = sy-l ...

  8. angularjs开发常见问题-1（持续更新中...）

    angularJs中学习中- 1.刷新当前页面数据:$state.reload service.create(data).then(function (newItem) { flash.success ...

  9. 将文件的图标添加到LISTVIEW中

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  10. 假设但是学习java入门，请离开SSH稍远

    我觉得有点累了步行上班,我想买一辆自行车.结果去了一看,想2500片.旁边的人说,2500所有最好加一些钱,买一挖电. 遂问电动车价格,3500,决定买.却被告知不如加点钱买小踏板摩托划算.于是看摩托 ...