案例：简易的Div拖拽

鼠标移入Div区域后，按下鼠标左键，可以拖动Div移动;松开鼠标左键，Div拖动停止。同时要求Div不能拖出屏幕显示区域外。

拖拽原理：距离不变、三个事件(onmousedown、onmousemove、onmouseup)

解决问题：

1、拖拽过程中，鼠标容易滑出Div区块；

2、防止Div拖出页面：修正位置；

3、解除绑定事件：鼠标左键抬起后，Div不再随着鼠标移动而发生位置变化；

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>习题-拖拽Div滑块</title>
  7.     <style>
  8.         * {
  9.             margin: 0;padding: 0;
  10.         }
  11.         div {
  12.             width: 100px;
  13.             height: 100px;
  14.             margin-bottom: 0px;
  15.             background-color: purple;
  16.             position: absolute;
  17.         }
  18.     </style>
  19.     <script>
  20.  
  21.         window.onload = function () {
  22.         //此处写代码
  23. }
  24.  
  25.     </script>
  26. </head>
  27. <body>
  28.     <div id='div1'></div>
  29. </body>
  30. </html>

　　参考代码：

  1. function getPos(ev) {
  2.     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  3.     var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
  4.     return { x: ev.clientX + scrollTop, y: ev.clientY + scrollLeft };
  5. }
  6. var oDiv = document.getElementById('div1');
  7. var disX = 0;
  8. var disY = 0;
  9. oDiv.onmousedown = function (ev) {
  10.     var oEvent = ev || event;
  11.     disX = getPos(oEvent).x - oDiv.offsetLeft;
  12.     disY = getPos(oEvent).y - oDiv.offsetTop;
  13.     document.onmousemove = function (ev) {
  14.         var oEvent = ev || event;
  15.         var l = oEvent.clientX - disX;
  16.         var t = oEvent.clientY - disY;
  17.         if (l < 0) {
  18.             l = 0;
  19.         } else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {
  20.             l = document.documentElement.clientWidth - oDiv.offsetWidth;
  21.         }
  22.         if (t < 0) {
  23.             t = 0;
  24.         } else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {
  25.             t = document.documentElement.clientHeight - oDiv.offsetHeight;
  26.         }
  27.         oDiv.style.left = l + 'px';
  28.         oDiv.style.top = t + 'px';
  29.     }
  30.     document.onmouseup = function () {
  31.         document.onmousemove = null;
  32.         document.onmouseup = null;
  33.     }
  34.     return false;
  35. }

　　

案例：简易的Div拖拽的更多相关文章

  1. HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （二）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...

  2. 实现Div拖拽

    直观的理解div拖拽:当鼠标对着可拖拽部分按住后并拖动,div会跟着鼠标一起运动,并且其运动空间限制在浏览器内部,当放开鼠标时,则div停止运动. 实现div拖拽需要三个重要的事件: (1)onmou ...

  3. html之div拖拽，html5拖拽

    html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp

  4. 运用DIV拖拽实现resize和碰撞检测

    运用DIV拖拽实现resize和碰撞检测 Div由拖拽改变大小 演示demo 当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式 用鼠标拖动右下 ...

  5. 纯js实现DIV拖拽

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

  6. html --- javascript --- div --- 拖拽方块

    当鼠标拖拽的很快时,光标会走出方块,所以把事件注册在了方块的父节点上, 如有疑问请参照:http://blog.csdn.net/a9529lty/article/details/2708171 使用 ...

  7. 原生js实现div拖拽+按下鼠标计时

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

  8. 原生js实现div拖拽

    十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. div拖拽缩放jquery插件编写——带8个控制点

    项目中需要对div进行拖拽缩放,需要有控制面板8个控制点的那种,原以为这么常见的效果应该能搜索到很多相关插件,然而可以完成拖拽的实繁,却找不到我想要的,还是自己动手丰衣足食吧 效果预览(只支持pc端) ...

随机推荐

  1. Python基本语法之数据类型(总览)

    Python的八种数据类型 Number,数值类型 String,字符串,主要用于描述文本 List,列表,一个包含元素的序列 Tuple,元组,和列表类似,但其是不可变的 Set,一个包含元素的集合 ...

  2. h5的第一份翻译

    <!DOCTYPE html>DOCTYPE DOC文本文档documentTYPE 类型html hyper超,超级的:text文本:markup标记:language语言<htm ...

  3. MeteoInfoLab脚本示例：获取气团轨迹每个节点的气象数据

    读取HYSPLIT输出的轨迹数据文件和相应时间的气象数据文件,生成轨迹图层,循环每条轨迹的节点,读出该节点的经度.纬度.气压.时间,通过对气象数据插值获得该节点的气象数据.脚本程序: #------- ...

  4. gitlab 拉代码提示：Your Account has been blocked. fatal: Could not read from remote repository. 最佳解决方案

    今天在脚本服务器上拉取代码,突然发现拉不了代码了,提示: GitLab: Your account has been blocked. fatal: Could not read from remot ...

  5. Anno 框架 增加缓存、限流策略、事件总线、支持 thrift grpc 作为底层传输

    github 地址:https://github.com/duyanming/dymDemo dym 分布式开发框架 Demo 熔断 限流 事件总线(包括基于内存的.rabbitmq的) CQRS D ...

  6. CVE-2009-0927-Adobe Reader缓冲区溢出漏洞分析

    0x00概述: 此漏洞的成因是由于Adobe Reader在处理PDF文档中所包含的JavaScript脚本时的Collab对象的getlcon()方式不正确处理输入的参数,而产生的缓冲区溢出,成功利 ...

  7. nfs4使用中的防火墙配置

    一,查看本地centos的版本: [root@localhost lib]# cat /etc/redhat-release CentOS Linux release 8.1.1911 (Core) ...

  8. STM32时钟和定时器

    时钟源 STM32包含了5个时钟源,分别为HSI.HSE.LSI.LSE.PLL. HSI是高速内部时钟.RC振荡器,频率为8MHz: HSE是高速外部时钟,即晶振,可接石英/陶瓷谐振器或接外部时钟源 ...

  9. react基础准备知识

    1.模块化:将重复的(可复用的)代码抽离为单个模块 2.组件化:将重复的 (可复用的) 的前端页面元素抽离单个组件 * Vue中实现组件化:1.Vue.component() 2.Vue.extend ...

  10. Vue内容

    vue中的过滤器 moeths点击 过滤器的含义 过滤器就是把原有的数据过一遍 放到页面中  不会改变原有的数据   只是在原有的数据上增加新的数据