js事件处理相关-实现一个div的拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <style type="text/css"> #divTest { width : 200px; height : 200px; background-color : red; border : 1px solid #00ffff; position : absolute; } </style> </head> <body> 测试一下 <div id="divTest"> </div> <script type="text/javascript"> var oDiv = document.getElementById("divTest"); oDiv.onmousedown = function (en) { var ev = ev || event; var disX = en.clientX - oDiv.offsetLeft; var disY = en.clientY - oDiv.offsetTop; if (oDiv.setCapture) { oDiv.setCapture(); } document.onmousemove = function (en) { var ev = ev || event; oDiv.style.top = en.clientY - disY + 'px'; oDiv.style.left = en.clientX - disX + 'px'; } document.onmouseup = function () { document.onmousemove = null; if (oDiv.releaseCapture) { oDiv.releaseCapture() } } return false;//阻止默认行为(如果页面中有文字,则会默认拖动文字),ie8及一下不行 } </script> </body> </html>
注意点:
1.获取当前div离上方和左方的距离之前使用了oDiv.style.left,获取不到
2.注意后面加px,老是容易忘记,然后还找不到错误原因浪费事件
3.
4.以后还是得实践,一味的看视频效果并不好,一定要明确最终目的,是需要掌握而不是单纯的看完视频。
js事件处理相关-实现一个div的拖拽的更多相关文章
- 实现一个div的拖拽效果
实现思路: 鼠标按下开始拖拽 记录摁下鼠标时的鼠标位置以及元素位置 拖动鼠标记下当前鼠标的位置 鼠标当前位置-摁下时鼠标位置= 鼠标移动距离 元素位置= 鼠标移动距离+鼠标摁下时元素的位置 class ...
- JS实现多Div模块拖拽功能
空闲时间,同事让帮忙整个JS拖拽div模块功能.于是便在网上搜索,总结如下一个可实现多div模块拖拽的功能.一下是整体的HTML代码, 里边可以控制到 拖拽开始(onStart),拖拽时候(onMov ...
- JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- day23—JavaScript实现DIV盒子拖拽(原生方式)
转行学开发,代码100天——2018-04-08 <!doctype html> <html> <head> <meta charset="utf- ...
- 移动端多个DIV简单拖拽功能
移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...
- Android高级控件(六)——自定义ListView高仿一个QQ可拖拽列表的实现
Android高级控件(六)--自定义ListView高仿一个QQ可拖拽列表的实现 我们做一些好友列表或者商品列表的时候,居多的需求可能就是需要列表拖拽了,而我们选择了ListView,也是因为使用L ...
- 【原创】js实现一个可随意拖拽排序的菜单导航栏
1.想做这个效果的原因主要是用在UC上看新闻发现他们的导航菜单很有趣.无聊的时候在哪划着玩了很久.所以就干脆自己写一个.原效果如下 2.整体效果如下,在已推荐和未添加里面每个小方块可以触摸移动位置互换 ...
- 自制一个H5图片拖拽、裁剪插件(原生JS)
前言 如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜.加贴纸.评颜值之类的.尤其是一些拍照软件公司的运营活动几乎全部都是这样的. 博主也做过不少,为了省事就封装了一个简单的图 ...
- 点滴积累【JS】---JS小功能(onmousedown实现鼠标拖拽div移动)
效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再 ...
随机推荐
- JavaWeb项目开发案例精粹-第6章报价管理系统-002辅助类及配置文件
1. <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www ...
- Android:Intel Atom x86模拟器的安装与使用
1.下载硬件加速执行管理器haxm-windows_r05.zip,找到系统对应版本,并安装 2.下载安卓x86系统映象sysimg_x86-19_r01.zip,不区分系统环境,解压得到x86文件夹 ...
- WPF之通过EventTrigger修改模板中元素的属性
前言:对于此操作,我只想说是微软的神经,还是我的笨蛋.为什么EventTrigger就不能像Trigger那样直接设置Property以及Value就对属性进行操作,而必须要放一个Action,而默认 ...
- MAVEN ERROR: unable to find valid certification path to requested target 解决办法
第一次使用MAVEN编译项目,出现如下错误 解决办法:Maven的setting.xml中添加如下代码 <mirrors> <mirror> <id>Central ...
- MyBatis学习总结_14_Mybatis使用技巧总结
1. 区分 #{} 和 ${}的不同应用场景 1)#{} 会生成预编译SQL,会正确的处理数据的类型,而${}仅仅是文本替换.对于SQL: select * from student where xC ...
- spring路径通配符
在应用Spring的工程中,使用class path的方式加载配置文件应该是最常用的做法,然而对大部分人来说,刚开始使用Spring时,几乎都碰到过加载配置文件失败的情况,除了配置上的错误外,很多时候 ...
- SUN dataset图像数据集下载
SUN dataset数据集,有两个不错的网址: http://vision.princeton.edu/projects/2010/SUN/ (普林斯顿大学) http://groups.csail ...
- 手机上的频段GSM GPRS分别是什么
GSM是一种第二代无线通信的网络制式标准,GPRS是GSM应用的一种数据业务(如上网).频段:上行:890-915MHz(中国移动:890-909,中国联通:909-915)下行:935-960MHz ...
- hdu - 1728逃离迷宫 && hdu - 1175 连连看 (普通bfs)
http://acm.hdu.edu.cn/showproblem.php?pid=1728 这两道题花了一下午的时候调试,因为以前做过类似的题,但是判断方向的方法是错的,一直没发现啊,真无语. 每个 ...
- 网易新闻页面信息抓取 -- htmlagilitypack搭配scrapysharp
最近在弄网页爬虫这方面的,上网看到关于htmlagilitypack搭配scrapysharp的文章,于是决定试一试~ 于是到https://www.nuget.org/packages/Scrapy ...