http://bbs.zhinengshe.com/thread-1200-1-1.html

要求：实现div块的拖拽

原理：拖拽过程中鼠标点和div块的相对位置保持不变。

需要理解三点：

1. 为什么要把onmousemove，onmouseup加在document上面 ？

2. onmouseup要怎么使用 ？

3. 如何防止div块跑出边界 ？

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <style>
  7.          #div1 {
  8.              width: 200px;
  9.              height: 200px;
  10.              background-color: red;
  11.              position: absolute;
  12.          }
  13.      </style>
  14.      <script>
  15.          window.onload = function () {
  16.              var oDiv = document.getElementById("div1");
  17.  
  18.              var disX = 0;
  19.              var disY = 0;
  20.  
  21.              oDiv.onmousedown = function (event) {
  22.                  disX = event.clientX - oDiv.offsetLeft;
  23.                  disY = event.clientY - oDiv.offsetTop;
  24.  
  25.                  document.onmousemove = function (event) {
  26.  
  27.                      var divLeft = event.clientX - disX;
  28.                      var divTop = event.clientY - disY;
  29.  
  30.                      if (divLeft < 0) divLeft = 0;
  31.                      if (divLeft > document.documentElement.clientWidth-oDiv.offsetWidth) {
  32.                          divLeft = document.documentElement.clientWidth-oDiv.offsetWidth;
  33.                      }
  34.                      if (divTop < 0) divTop = 0;
  35.                      if (divTop > document.documentElement.clientHeight - oDiv.offsetHeight) {
  36.                          divTop = document.documentElement.clientHeight - oDiv.offsetHeight;
  37.                      }
  38.  
  39.                      oDiv.style.left = divLeft + "px";
  40.                      oDiv.style.top = divTop + "px";
  41.                  };
  42.                  document.onmouseup = function () {
  43.                      document.onmousemove = null;
  44.                      document.onmouseup = null;
  45.                  }
  46.              };
  47.          }
  48.      </script>
  49.  </head>
  50.  <body>
  51.      <div id="div1"></div>
  52.  </body>
  53.  </html>

运行效果：【点击这里】

JS事件中级 --- 拖拽的更多相关文章

  1. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  2. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  3. 关于d3.js 将一个element 拖拽到另一个element的响应事件

    rt 正在做机柜可视化, 一个需求是能拖拽左侧列表的设备名称, 拖到右侧42U机柜中,并将设备图片放置在对应机柜位置上. 开始的时候一切都很顺利,点击左侧设备名称,添加一个g容器,将设备名称作为tex ...

  4. js阻止默认事件、拖拽等等

    1.自定义右键菜单: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> &l ...

  5. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...

  6. js实现可拖拽的div

    前言 下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习 ...

  7. 纯JS实现可拖拽表单

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mouse ...

  8. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

  9. js制作可拖拽可点击的悬浮球

    兼容mouse事件和touch事件,支持IE9及其以上 效果展示:https://jsfiddle.net/shifeng/7xebf3u0/ // index.html <!DOCTYPE h ...

随机推荐

  1. 热门前沿知识相关面试问题-MVC/MVP/MVVM架构设计模式面试问题详解

    MVC[最常用]: MVC的定义:M:业务逻辑处理.[业务MODEL]V:处理数据显示的部分.[如xml布局文件]C:Activity处理用户交互的问题.[也就是Activity在MVC中扮演着C的角 ...

  2. Python学习 第一天（一）初始python

    1.python的前世今生 想要充分的了解一个人,无外乎首先充分了解他的过去和现在:咱们学习语言也是一样的套路 1.1 python的历史 Python(英国发音:/ˈpaɪθən/ 美国发音:/ˈp ...

  3. linux抓取usb包设置usbmon

  4. 【踩坑记录】 使用form标签的 reset() 方法报错原因及处理方法

    如果form标签内包含了 id 为 reset 的元素,在调用form的 reset() 方法时,会报xxx.reset is not a function,原因是在调用form的 reset() 方 ...

  5. 第六章 组件 56 组件-组件中的data

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 用python 遍历文件夹中所有.dcm文件

    import dicomimport os def eachFile(filepath): for file in os.listdir(filepath): child = os.path.join ...

  7. 论文参考文献中的M R J意义

    1 期刊作者.题名［J］.刊名,出版年,卷(期):起止页码 2 专著作者.书名［M］.版本(第一版不著录).出版地:出版者,出版年.起止页码 3 论文集作者.题名［C］.//编者.论文集名.出版地:出 ...

  8. javaScript--for循环的性能提升

    //为什么性能提升? //第一种写法每次循环时都需要从内存中取出students.length并判断条件是否成立 //第二种写法只需要取一次students.length就可以 //第二种方式弊端:l ...

  9. Codeforces 852F String Compression

    题目 OvO http://codeforces.com/contest/825/problem/F 题解 KMP+DP 十分优雅地利用了KMP的fail数组 fail[k]表示第k个后缀的的fail ...

  10. How to Fix "Linux Failure to Download extra data files for ttf-mscorefonts-installer" error

    How to Fix "Linux Failure to Download extra data files for ttf-mscorefonts-installer" erro ...