<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>完美拖拽</title>

    <style type="text/css">

        html,body{overflow:hidden;}

        body,div,h2,p{margin:0;padding:0;}

        body{color:#fff;background:#000;font:12px/2 Arial;}

        p{padding:0 10px;margin-top:10px;}

        span{color:#ff0;padding-left:5px;}

        #box{position:absolute;width:300px;height:150px;background:#333;border:2px solid #ccc;top:50%;left:50%;margin:-75px 0 0 -150px;}

        #box h2{height:25px;cursor:move;background:#222;border-bottom:2px solid #ccc;text-align:right;padding:0 10px;}

        #box h2 a{color:#fff;font:12px/25px Arial;text-decoration:none;outline:none;}

    </style>

    <script>

        window.onload=function(){

            var oBox=document.getElementById("box");

            var oH=oBox.getElementsByTagName("h2")[0];

            var oA=oBox.getElementsByTagName("a")[0];

            var aSpan=oBox.getElementsByTagName("span");

            var aPos=[{x:oBox.offsetLeft,y:oBox.offsetTop}];

            var bDrag=false;

            var disX=disY=0;

            oH.onmousedown=function(ev){

                var oEv=ev||window.event;

                bDrag=true;

                aPos.push({x:oBox.offsetLeft,y:oBox.offsetTop});

                disX=oEv.clientX-oBox.offsetLeft;

                disY=oEv.clientY-oBox.offsetTop;

                this.setCapture&&this.setCapture();

                return false;

            };

            document.onmousemove=function(ev){

                if (!bDrag) return;

                var oEv=ev||window.event;

                var iL=oEv.clientX-disX;

                var iT=oEv.clientY-disY;

                var iMaxL=document.documentElement.clientWidth-oBox.offsetWidth;

                var iMaxT=document.documentElement.clientHeight-oBox.offsetHeight;

                iL=iL<0?0:iL;

                iT=iT<0?0:iT;

                iL=iL>iMaxL?iMaxL:iL;

                iT=iT>iMaxT?iMaxT:iT;

                oBox.style.marginTop=oBox.style.marginLeft=0;

                oBox.style.left=iL+"px";

                oBox.style.top=iT+"px";

                aPos.push({x:iL,y:iT});

                status();

                return false;

            };

            document.onmouseup=window.onblur=oH.onlosecapture=function(){//window.onblur表示当前窗口失去焦点即激活了其他线程的窗口

                bDrag=false;

                this.releaseCapture&&this.releaseCapture();

                status()

            };

            //回放

            oA.onclick=function(){

                var oPos=play=null;

                if(aPos.length==1) return;

                play=setInterval(function(){

                    oPos=aPos.pop();

                    oPos?(oBox.style.left=oPos.x+"px",oBox.style.top=oPos.y+"px", status()):clearInterval(play);

                },50);

                this.focus=false;

                return false;

            };

            oA.onmousedown=function(ev){

                (ev||window.event).cancelBubble=true;

            };

            function status(){

                aSpan[0].innerHTML=bDrag;

                aSpan[1].innerHTML=oBox.offsetLeft;

                aSpan[2].innerHTML=oBox.offsetTop;

            }

            status();

        };

//心得：用bDrag来独立move和up函数（不同嵌套在down函数里）

//     在临界值的处理里，先把最值算出来再和最值比较再赋值

//     三目运算符里可以写多条语句，用","隔开即可

//     赋值的时候，要考虑是否收到布局的影响。如oBox.style.left和top赋值前要先把margin值清零

//     ie捕获事件：setCapture()  ie释放事件捕获：releaseCapture()

    </script>

</head>

<body>

<div id="box">

    <h2><a href="javascript:;">点击回放拖动轨迹</a></h2>

    <p><strong>Drag:</strong><span></span></p>

    <p><strong>offsetTop:</strong><span></span></p>

    <p><strong>offsetLeft:</strong><span></span></p>

</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拖拽

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

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

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

随机推荐

  1. easymock所测试的方法内部新NEW对象的处理

    问题:当记录的方法的参数是方法所在类内部新NEW的对象时,静态的记录方法交互就会失效,例如 调用的方法: public calss A{ public void method(User u){ u.s ...

  2. 哈希表（Hash Table）

    参考: Hash table - Wiki Hash table_百度百科 从头到尾彻底解析Hash表算法 谈谈 Hash Table 我们身边的哈希,最常见的就是perl和python里面的字典了, ...

  3. UIautomator Python测试

    #!/usr/bin/env python # -*- coding: utf-8 -*- import unittest from mock import MagicMock, patch impo ...

  4. ie8下背景图片平铺问题

    IE9+及其他浏览器实现背景图片平铺可能需要一个属性就可以background-size:100%/cover; 但是ie8下background-size是不兼容的,因此我们需要用到滤镜,来解决背景 ...

  5. 深入浅出Mybatis系列（九）---强大的动态SQL

    上篇文章<深入浅出Mybatis系列(八)---mapper映射文件配置之select.resultMap>简单介绍了mybatis的查询,至此,CRUD都已讲完.本文将介绍mybatis ...

  6. 后台接收前台传入的json 数据

    引入JSONArray的类型为org.json而不是net.sf.json,笔者开始引入的是net.sf.json.JSONArray, 但JSONObject.fromObject(obj)时报错报 ...

  7. sicily 1934. 移动小球

    Description 你有一些小球,从左到右依次编号为1,2,3,...,n. 你可以执行两种指令(1或者2).其中, 1 X Y表示把小球X移动到小球Y的左边, 2 X Y表示把小球X移动到小球Y ...

  8. iOs基础篇（二十二）—— UIPickerView、UIDatePicker控件的使用

    一.UIPickerView UIPickerView是一个选择器控件,可以生成单列的选择器,也可生成多列的选择器,而且开发者完全可以自定义选择项的外观,因此用法非常灵活. 1.常用属性 (1)num ...

  9. Windows Store App 全球化 设置指定页面的语言

    上一小节介绍了通过在应用程序中添加语言设置选项来改变整个应用显示信息的语言,而有时用户只想对应用中某一页面信息的语言进行调整,这时就不能使用上一小节所讲述的知识来对应用进行设置.下面将通过一个示例介绍 ...

  10. js 判断IE浏览器，包含IE6/7/8/9

    //判断IE6-9的版本,num可取值为6/7/8/9//若不给参数num,仅判断浏览器是否为IE,不判断版本 var isIE = function (num) { if(arguments.len ...