<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style media="screen">

         * {

             margin: 0;

             padding: 0;

         }

         .nav {

             height: 30px;

             background-color: lemonchiffon;

             line-height: 30px;

             padding-left: 30px;

         }

         .nav a {

             text-align: center;

             font-size: 14px;

             text-decoration: none;

             color: #000;

         }

         .d-box {

             width: 400px;

             height: 300px;

             border: 5px solid #ccc;

             box-shadow: 2px #666;

             position: absolute;

             top: 40%;

             left: 40%;

         }

         .hd {

             width: 100%;

             height: 25px;

             background-color: #777;

             line-height: 25px;

             color: #fff;

             cursor: move;

         }

         #box_close {

             float: right;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

     <!-- 顶部注册信息 -->

     <div class="nav">

         <a href="javascript:;" id="register">注册信息</a>

     </div>

     <!-- 可以移动的对话框 -->

     <div class="d-box" id="d_box">

         <div class="hd" id="drop">

             <i>注册信息 (可以拖拽)</i>

             <span id="box_close">【关闭】</span>

         </div>

         <div class="bd"></div>

     </div>

     <script src="animate.js" charset="utf-8"></script>

     <script type="text/javascript">

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

         var drop = document.getElementById("drop");

         //先按下，在移动触动此事件

         drop.onmousedown = function(event){

             //获取鼠标在盒子中的坐标，将来移动的时候减去保证鼠标在盒子的指定位置

             event = event || window.event;

             var pagex = event.pageX || scroll().left + event.clientX;

             var pagey = event.pageY || scroll().top + event.clientY;

             var x = pagex - box.offsetLeft;

             var y = pagey - box.offsetTop;

             document.onmousemove = function(event){

                 //把鼠标的坐标赋值给对话框。

                 event = event || window.event;

                 var xx = event.pageX || scroll().left + event.clientX;

                 var yy = event.pageY || scroll().top + event.clientY;

                 //二次操作鼠标位置

                 targetx = xx - x;

                 targety = yy - y;

                 //给box赋值

                 box.style.left = targetx + "px";

                 box.style.top = targety + "px";

                 //禁止文本选中（选中后取消）

                 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

             }

         }

         //事件解绑

         drop.onmouseup = function(){

             document.onmousemove = null;

         }

     </script>

 </body>

 </html>

javascript 拖拽事件的更多相关文章

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

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

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

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

  3. javascript拖拽事件

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  4. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  5. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

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

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

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

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

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

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

  9. 完美实现鼠标拖拽事件，解决各种小bug，基于jquery

    鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...

随机推荐

  1. 【转】七牛免费SSL证书，配置自定义域名CDN加速

    原文链接:https://excaliburhan.com/post/use-qiniu-ssl-and-cdn.html 申请七牛SSL证书 其实,七牛在很早之前就支持CDN使用https,但是他要 ...

  2. Spring注解 开发

  3. 排查mysql innodb Lock wait timeout exceeded; try restarting transaction的问题

    OMG写的时候崩溃了一次. 触发关注这个问题的事情是 我们在使用pt-online-schedule 改表的时候总是拿不到锁,并且报出mysql innodb Lock wait timeout ex ...

  4. Idea for Mac 过期 IntelliJ IDEA 2017 完美注册方法(附idea for Mac破解方法)

    Idea 不能使用了: 开始破解: (1)首先下载 jar包: https://download.csdn.net/download/engerla/10573069 放到位置: /Applicati ...

  5. Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 7. 条件循环

    条件循环能够让程序在条件成立时(即为真时)重复执行循环体中的语句.如果条件一直成立(即永远不会为假),则循环会一直进行下去,不会停止.如果初始时,条件不成立,则循环 1 次也不会执行.Python 中 ...

  6. codeforces518B

    Tanya and Postcard CodeForces - 518B 有个小女孩决定给他的爸爸寄明信片.她已经想好了一句话(即长度为n的字符串s),包括大写和小写英文字母.但是他不会写字,所以她决 ...

  7. 使用libcurl 发送post请求

    SendHttpPost(string& strUrl, string& strPost, string& strResponse, int nTimeOut) { CURLc ...

  8. [资源]--完美解决--用VS中的Git做代码管理器，与他人共享代码

    1.创建代码仓库,这里说一下为什么要创建仓库,Git不能够作为源代码管理器,vs中自带的也只能够在本地进行管理,要和他们共享的话必须要有服务器端去存储代码,类似于SVN,它就有客户端和服务器端,这里推 ...

  9. BZOJ2716 [Violet]天使玩偶（cdq分治+树状数组）

    非常裸的KD-tree.然而我没学啊. 考虑如何离线求一个点在平面中的曼哈顿最近点. 绝对值显得有点麻烦,于是把绝对值拆开分情况讨论一波.对于横坐标小于该点的,记录对于纵坐标的前缀x+y最大值和后缀x ...

  10. 【POJ 2251】Dungeon Master（bfs）

    BUPT2017 wintertraining(16) #5 B POJ - 2251 题意 3维的地图,求从S到E的最短路径长度 题解 bfs 代码 #include <cstdio> ...