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

要求：实现div块的拖拽

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

需要理解三点：

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

2. onmouseup要怎么使用 ？

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

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         #div1 {

             width: 200px;

             height: 200px;

             background-color: red;

             position: absolute;

         }

     </style>

     <script>

         window.onload = function () {

             var oDiv = document.getElementById("div1");

             var disX = 0;

             var disY = 0;

             oDiv.onmousedown = function (event) {

                 disX = event.clientX - oDiv.offsetLeft;

                 disY = event.clientY - oDiv.offsetTop;

                 document.onmousemove = function (event) {

                     var divLeft = event.clientX - disX;

                     var divTop = event.clientY - disY;

                     if (divLeft < 0) divLeft = 0;

                     if (divLeft > document.documentElement.clientWidth-oDiv.offsetWidth) {

                         divLeft = document.documentElement.clientWidth-oDiv.offsetWidth;

                     }

                     if (divTop < 0) divTop = 0;

                     if (divTop > document.documentElement.clientHeight - oDiv.offsetHeight) {

                         divTop = document.documentElement.clientHeight - oDiv.offsetHeight;

                     }

                     oDiv.style.left = divLeft + "px";

                     oDiv.style.top = divTop + "px";

                 };

                 document.onmouseup = function () {

                     document.onmousemove = null;

                     document.onmouseup = null;

                 }

             };

         }

     </script>

 </head>

 <body>

     <div id="div1"></div>

 </body>

 </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. 调用libusb_control_transfer 出错,返回-8

    写入 0x81读出 0x01 对USB输出端点进行初始化,包括端点地址.传输类型和最大包长度 注意一下,USB初始化时,也有读/写之分. 写入: cyusb_bulk_transfer(writeha ...

  2. python+Appium自动化：Appium-desktop界面简介

    Appium Desktop是一款适用于Mac,Windows和Linux的开源应用程序,提供了更加优化的图形界面. Appium Desktop是由Simple.Advanced.Presets三个 ...

  3. luogu1261 服务器储存信息问题[最短路]

    首先$O(n^2\log n)$暴力很好想,直接每个点出发跑一遍最短路,排$dis$统计一下即可.考虑怎么优化.发现$rank$很小,考虑从$rank$入手.换一种统计方法,看每个点$x$如果作为别的 ...

  4. hive传递参数与调用

    在运行hive命令时传入参数,使用-hivevar 和 -hiveconf 两种参数选项,来给此次的执行脚本传入参数 -hivevar : 传参数 ,专门提供给用户自定义变量. -hiveconf : ...

  5. ip端口协议,SSHj加密连接

    SSH协议----一旦linux服务器开机,SSH协议就不断的侦听22端口,一旦有连接到达,就校验连接用户名和密码: 可以理解为连接ip端口为找到一栋大楼,发送用户名和密码为向大楼保安出示证件.SSH ...

  6. [Algorithm] Finding all factors of a number

    12's factors are: {1,2,3,4,6,12} function factors (n) { let list = []; for (let i = 1; i < Math.s ...

  7. 题解 【NOI2015】软件包管理器

    题面 解析 事实上,这应该是道树剖裸题了, 将已安装表示为\(1\), 那么只需要在线段树中记录一下区间中\(1\)的个数就行了. 在询问的时候, 如果是安装,就查询\(x\)到根节点, 卸载的话,就 ...

  8. Redis——解决“org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'redisReferenceResolver': Unsatisfied dependency expressed through constructor parameter 0”

    错误栈: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name ...

  9. 《剑指offer》算法题第十二天

    今天是<剑指offer>算法题系列的最后一天了,但是这个系列并没有包括书上的所有题目,因为正如第一天所说,这些代码是在牛客网上写并且测试的,但是牛客网上并没有涵盖书上所有的题目. 今日题目 ...

  10. MessagePack Java Jackson 在不关闭输入流（input stream）的情况下反序列化多变量

    com.fasterxml.jackson.databind.ObjectMapper 在读取输入流变量的时候默认的将会关闭输入流. 如果你不希望关闭输入流,你可以设置 JsonParser.Feat ...