<!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. Spring Boot features - Profiles

    https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-profiles.html https://w ...

  2. Ping命令的另一种使用方法

    今天实习结束休息的时候无聊,于是便想看看机房有多少机器,IP是什么,有没有什么小漏洞. 依次使用了netstat.ping.Telnet以后,不小心输入了这样一个东西 当时按下回车以后,心里想的是这样 ...

  3. GlusterFs卷的简单操作

    一.创建卷 gluster volume create 例子:gluster volume create gv0 replica 2 server1:/data/brick1/gv0 server2: ...

  4. apache自带压力测试工具ab的使用及解析

    当你搭建了apache服务器并在上面部署了web网站,在网站运行前,为了使apache服务器的性能得到更好的应用,我们可以先对其进行压力测试.进行压力测试其实非常简单,我们也不用再额外下载安装什么测试 ...

  5. matplotlib之随机漫步

    # 随机漫步类 from random import choice from matplotlib import pyplot as plt from pylab import mpl from ma ...

  6. JavaScript——DOM树的增查改删总结

    对HTML DOM的操作是前端JavaScript编程时必备的技能,本文是我自己对DOM树操作的总结,主要是方法的罗列,原理性的讲述较少,适合大家用于理清思路或是温习 一.什么是HTML DOM? 是 ...

  7. 闭包自由变量引用对象的问题 http://bbs.pythontab.com/thread-4266-1-1.html

  8. LightOJ - 1356 Prime Independence (二分图 最大独立集 素数打表)

    题意: 给你一个集合,让你从这个集合中挑选出几个数,使得这几个数中任意两个数相除后的值不能为素数 即挑选出来的这几个数不能互相冲突 最大独立集 = 所有点数 - 最大匹配数 呵..呵...原先用的二维 ...

  9. CUBA在查询语句如何添加参数

    在browse.xml中的collectionDatasource 可以添加查询语句,使用 “= :custom$param”  的形式 <collectionDatasource id=&qu ...

  10. MT【38】与砝码有关的两个题

    此题只适合1%的优秀学生阅读: 北京大学2017中学生数学奖个人能力挑战赛第四题(最后一题) 解析:第一问: 第二问,略,答案也是147. 类似的: 评:1.北大的题用了2进制,后面的这题用了三进制, ...