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. Minimum Integer CodeForces - 1101A (思维+公式)

    You are given qq queries in the following form: Given three integers lili, riri and didi, find minim ...

  2. Apollo的Oracle适配

    Apollo的Oracle适配改动   这几天工作需要使用Apollo配置中心.Apollo唯一的依赖是MySQL数据库,然而公司只有Oracle数据库资源.这里有一个Oracle适配改动的分支,但是 ...

  3. 【转帖】2018年Windows漏洞年度盘点

    2018年Windows漏洞年度盘点丨老漏洞经久不衰,新0day层出不穷 腾讯电脑管家2019-02-12共17875人围观 ,发现 1 个不明物体网络安全资讯 https://www.freebuf ...

  4. maven手动添加jar包到本地仓库

    推荐几个好的 Maven 常用仓库网址:http://mvnrepository.com/http://search.maven.org/ Maven 安装 JAR 包的命令是: mvn instal ...

  5. JavaScript——数组

    数组是JavaScript中的常用类型,本文详述了数组的基本知识以及一些常用的数组方法,并对每种方法进行了详细解释 数组定义 用字面量直接定义 1 var arr=[0,0,0]; //注意,是方括号 ...

  6. maven 聚合的含义是父类打包 ,清理等 则子类自动打包;也就是一键打包 方便服务

    maven 聚合的含义是父类打包 ,清理等 则子类自动打包:也就是一键打包 方便服务

  7. asp.net 的三种开发模式

    一, Web Pages 是三种创建 ASP.NET 网站和 Web 应用程序的编程模式中的一种. 其他两种编程模式是 Web Forms 和 MVC(Model View Controller 模型 ...

  8. BZOJ4723[POI2017]Flappy Bird——模拟

    题目描述 <飞扬的小鸟>是一款风靡的小游戏.在游戏中,小鸟一开始位于(0,0)处,它的目标是飞到横坐标为X的某个位置 上.每一秒,你可以选择点击屏幕,那么小鸟会从(x,y)飞到(x+1,y ...

  9. BZOJ1926[Sdoi2010]粟粟的书架——二分答案+主席树

    题目描述 幸福幼儿园 B29 班的粟粟是一个聪明机灵.乖巧可爱的小朋友,她的爱好是画画和读书,尤其喜欢 Thomas H. Co rmen 的文章.粟粟家中有一个 R行C 列的巨型书架,书架的每一个位 ...

  10. 【Linux】Centos6.8下一键安装Lamp环境

    [下载地址] 以下三种都是快捷安装环境的工具,都提供相应的脚本,原理都相同,一个会了其他的也就都会了,我用的比较多的会是lnmp和oneinstack,最近在用的都是oneinstack,挺好用的. ...