1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.      <title>Document</title>
  8.      <style media="screen">
  9.          * {
  10.              margin: 0;
  11.              padding: 0;
  12.          }
  13.          .nav {
  14.              height: 30px;
  15.              background-color: lemonchiffon;
  16.              line-height: 30px;
  17.              padding-left: 30px;
  18.          }
  19.          .nav a {
  20.              text-align: center;
  21.              font-size: 14px;
  22.              text-decoration: none;
  23.              color: #000;
  24.          }
  25.          .d-box {
  26.              width: 400px;
  27.              height: 300px;
  28.              border: 5px solid #ccc;
  29.              box-shadow: 2px #666;
  30.              position: absolute;
  31.              top: 40%;
  32.              left: 40%;
  33.          }
  34.          .hd {
  35.              width: 100%;
  36.              height: 25px;
  37.              background-color: #777;
  38.              line-height: 25px;
  39.              color: #fff;
  40.              cursor: move;
  41.          }
  42.          #box_close {
  43.              float: right;
  44.              cursor: pointer;
  45.          }
  46.      </style>
  47.  </head>
  48.  <body>
  49.      <!-- 顶部注册信息 -->
  50.      <div class="nav">
  51.          <a href="javascript:;" id="register">注册信息</a>
  52.      </div>
  53.  
  54.      <!-- 可以移动的对话框 -->
  55.      <div class="d-box" id="d_box">
  56.          <div class="hd" id="drop">
  57.              <i>注册信息 (可以拖拽)</i>
  58.              <span id="box_close">【关闭】</span>
  59.          </div>
  60.          <div class="bd"></div>
  61.      </div>
  62.  
  63.      <script src="animate.js" charset="utf-8"></script>
  64.      <script type="text/javascript">
  65.          var box = document.getElementById("d_box");
  66.          var drop = document.getElementById("drop");
  67.          //先按下，在移动触动此事件
  68.          drop.onmousedown = function(event){
  69.              //获取鼠标在盒子中的坐标，将来移动的时候减去保证鼠标在盒子的指定位置
  70.              event = event || window.event;
  71.  
  72.              var pagex = event.pageX || scroll().left + event.clientX;
  73.              var pagey = event.pageY || scroll().top + event.clientY;
  74.              var x = pagex - box.offsetLeft;
  75.              var y = pagey - box.offsetTop;
  76.  
  77.              document.onmousemove = function(event){
  78.                  //把鼠标的坐标赋值给对话框。
  79.                  event = event || window.event;
  80.                  var xx = event.pageX || scroll().left + event.clientX;
  81.                  var yy = event.pageY || scroll().top + event.clientY;
  82.                  //二次操作鼠标位置
  83.                  targetx = xx - x;
  84.                  targety = yy - y;
  85.                  //给box赋值
  86.                  box.style.left = targetx + "px";
  87.                  box.style.top = targety + "px";
  88.                  //禁止文本选中（选中后取消）
  89.                  window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
  90.              }
  91.          }
  92.          //事件解绑
  93.          drop.onmouseup = function(){
  94.              document.onmousemove = null;
  95.          }
  96.      </script>
  97.  </body>
  98.  </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. Laravel - 1

    Laravel - 1 Laravel是一个很强大又非常优雅的php框架,但是Laravel的很多组件都是由社区协作的结果,Composer是php开发的一个依赖管理工具,但是墙把绝大多数的开发者堵在 ...

  2. SQLPLUS SQLCMD连接管理oracle sqlserver的简单用法

    1. SQLPLUS 与plsql一样,其实不需要安装oracle客户端,只要是有sqlplus的即时客户端 以及将目录放置到path或者是相应的oralce_home变量中即可. 打开运行cmd s ...

  3. sort和uniq的应用实例

    sort 排序 uniq 1.语法:sort [option]... [file]... 2.选项:-k key,关键子,指定以那个列来排序.如果不指定,默认将正行作为关键字排序-n 对数值排序.默认 ...

  4. java离线地图web GIS制作

    因为项目需求,要做一个web地图,之前做过高德的在线地图,它提供了一系列的API,并且由于是国产的,所以开发起来比较容易,现在由于项目是内网使用的,所以需要使用离线地图,由此便开始了: Web GIS ...

  5. ThinkPHP 框架出现安全隐患 ，导致网站被持续攻击一周

    导读 据 ZDNET 报道,有超过 45000 个中国网站由于使用 ThinkPHP 框架受到了攻击. 这些攻击针对的是使用 ThinkPHP 构建的网站,ThinkPHP 是一个中国的 PHP 框架 ...

  6. python构建bp神经网络_曲线拟合(一个隐藏层)__2.代码实现

    IDE:jupyter 抽象程度可能不是那么高,以后再优化. 理论和代码实现的差距还是挺大的 数据集请查看 python构建bp神经网络(一个隐藏层)__1.数据可视化 部分代码预览 git上传.ip ...

  7. 自学Aruba5.3.4-Aruba安全认证-有PEFNG 许可证环境的认证配置802.1x

    点击返回:自学Aruba之路 自学Aruba5.3.4-Aruba安全认证-有PEFNG 许可证环境的认证配置802.1x 1. 采用InterDB认证服务器完成802.1X认证 (Aruba650) ...

  8. GDB最常用的命令

    为了调试我的指针LCT--我学会了如何使用gdb! 粘一个常用命令表(原文地址:https://blog.csdn.net/tzshlyt/article/details/53668885) gcc ...

  9. [luogu1912][bzoj4196][NOI2015]软件管理器

    题解 树剖模板题,每次改变是\(1\)或者是\(0\),区间求和和区间修改就可了. ac代码 # include <cstdio> # include <cstring> # ...

  10. hdu3072 Intelligence System (最小树形图？）

    题意:给一个有向图,问要从0号点能到达所有点所需要经过路径的最小权值和是多少,然而,若两点强联通,则这两点互相到达不需要花费.保证0号点能到达所有点 tarjan缩点以后直接取每个点入边中花费最小的即 ...