<!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. SpringMVC视图解析器概述

    不论控制器返回一个String,ModelAndView,View都会转换为ModelAndView对象,由视图解析器解析视图,然后,进行页面的跳转. 控制器处理方法---->ModelAndV ...

  2. Centos wget命令 not found解决方法

    如果已经有了yun源,则可通过yun源命令来安装wget. 如下所示: 2.yum安装yum -y install wget 即可安装:

  3. Spring基础之 反射(Reflection)

    1.了解Class package com.inspire.reflection.Class_api; import java.lang.reflect.Constructor; import jav ...

  4. [转载]Memory Limits for Windows and Windows Server Releases

    Memory Limits for Windows and Windows Server Releases This topic describes the memory limits for sup ...

  5. OA与BPM的区别

      BPM OA 软件架构 JAVA..NET.基于SOA架构 JAVA..NET.PHP.Domino 驱动模式 流程驱动 文档驱动 交互 人与人,人与系统,系统与系统 人与人 软件功能       ...

  6. Idea解决打开大文件消耗CPU问题

    dea打开大文件的时候,会导致cpu利用率变得特别高,我这边八核i7的配置下,cpu依然飙到了600%~700%,这个时候就需要修改idea的配置(下面以Ubuntu为例). 1.进入到idea安装目 ...

  7. maven 父工程 消除重复 对子模块进行管理 主要继承依赖

     子类继承父类的 可以不需要groupid与versionid

  8. BZOJ4832[Lydsy1704月赛]抵制克苏恩——期望DP

    题目描述 小Q同学现在沉迷炉石传说不能自拔.他发现一张名为克苏恩的牌很不公平.如果你不玩炉石传说,不必担心,小Q 同学会告诉你所有相关的细节.炉石传说是这样的一个游戏,每个玩家拥有一个 30 点血量的 ...

  9. BZOJ3453 XLkxc（拉格朗日插值）

    显然f(i)是一个k+2项式,g(x)是f(i)的前缀和,则显然其是k+3项式,插值即可.最后要求的东西大胆猜想是个k+4项式继续插值就做完了.注意2p>maxint…… #include< ...

  10. UVa - 10339

    It has been said that a watch that is stopped keeps better time than one that loses 1 second per day ...