js 原生_拖动页面元素,松开释放
嗯哼。不多说,直接上代码了。
// 为元素 绑定拖动事件
function bindDragEvent(obj){
obj.onmousedown = function(e){
e = e || window.event; obj.setCapture && obj.setCapture(); // IE8 及以下 强制捕获下一次单击事件 obj.fixedX = e.clientX - (obj.getBoundingClientRect().left - document.documentElement.clientLeft);
obj.fixedY = e.clientY - (obj.getBoundingClientRect().top - document.documentElement.clientTop); document.onmousemove = function(e){
e = e || window.event; var x = e.clientX + (document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft);
var y = e.clientY + (document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop); obj.style.left = x - obj.fixedX + "px"; // 元素在页面中的坐标 = 鼠标在页面中的坐标 - 元素在页面中的坐标
obj.style.top = y - obj.fixedY + "px";
}; document.onmouseup = function(){
document.onmousemove = null; // 解除 鼠标移动div跟随 事件
document.onmouseup = null; // 解除鼠标松开事件
obj.releaseCapture && obj.releaseCapture(); // IE8 及以下 解除强制捕获单击事件
}; return false;
};
}
js 原生_拖动页面元素,松开释放的更多相关文章
- js原生 + jQuery实现页面滚动字幕
js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...
- 每日分享!~ 使用js原生方式对拖拉元素(鼠标的事件)
一个元素放置页面上.如何进行拖拉,实现想放哪里就放哪里的效果呢? 效果如下: 如果让你写这个效果,你会如何写呢? --- 思路分析:我首先想到的是,对这个元素先绑定一个事件.(什么事件? 那当然是鼠标 ...
- js原生选择class DOM元素
document.querySelector(".demo"); querySelector() 方法返回匹配指定选择器的第一个元素.如果需要返回所有的元素,使用 querySel ...
- JS与JQ 获取页面元素值的方法和差异对比
获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeig ...
- js原生_获取url键值对
思路: 1.先对url进行处理,获取 ?后的字符串 postid=10457794&actiontip=保存修改成功') 2. 字符串通过&标识,不同参数转为数组 ["pos ...
- js动态增加html页面元素
问题: <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2 ...
- 在js中获取到的页面元素为undefined
在学习js的过程中发现了一个问题就是:在js代码中获取页面元素进行操作的时候发现怎么都没有效果,控制台也不报错,弹出获取的元素结果发现是undefined类型. 后来查找了资料发现:因为我的js是写在 ...
- Node.js原生及Express方法实现注册登录原理
由于本文只是实现其原理,所以没有使用数据库,只是在js里面模拟数据库,当然是种中还是需要用数据库的. 1.node.js原生方法 ①html页面,非常简单,没有一丝美化~我们叫它user.html & ...
- 原生js与jquery加载页面元素比较
原生js:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,js提供了window.onload 这个方法事先加载元素 <script type="text/javascrip ...
随机推荐
- Linux记录-open-falcon开源监控系统部署
参考https://book.open-falcon.org/zh_0_2/quick_install/prepare.html一.安装后端1.环境准备yum -y install redisyum ...
- 第四节:IO、序列化和反序列化、加密解密技术
一. IO读写 这里主要包括文件的读.写.移动.复制.删除.文件夹的创建.文件夹的删除等常规操作. 注意:这里需要特别注意,对于普通的控制台程序和Web程序,将"相对路径"转换成& ...
- 记事本:CSS
css更多的是一种用来修饰HTML的语言 CSS的三种引入方式 1.行内样式:一般不会这样写,如果想选择某一个,可以用之后内部样式中更加详细的选中方式 行内的优先级最高 <p style=&qu ...
- pycharm导入自己写的模块时,模块下方出现红色波浪线的解决方案
文章链接:https://blog.csdn.net/weixin_38383877/article/details/81121851 这种情况其实可以不用管,是可以正常运行的: 但是,如果看着不舒服 ...
- web页面实现文件下载的几种方法
今天碰到文件下载的一些问题,本着知其然也要知其所以然的精神,站在巨人的肩膀上深入学习和测试了一下,抛砖引玉,现在总结结论如下: 1)标准URL下载方式可以通过在web页面中嵌入 url超级链接,标准的 ...
- cf自训4.10
cf933A dp题 一开始看错是连续子序列了,然后样例刚好能过.. 然后正解没想出来,网上看了题解:感觉正解是枚举2开始的位置,然后再枚举翻转的区间,pos左右两侧分别求出贡献最大的那个区间,左右两 ...
- iOS关键词weak和assign的区别
一.区别 首先说说在什么情况下使用 weak 关键字 1.ARC中,在有可能出现循环引用的时候,往往要通过让其中一端使用weak来解决,比如:delegate 的代理属性. 2.自身已经对它有过一次强 ...
- STM32串口空闲中断
串口初始化 #include "usart5.h" vu16 UART5_RX_STA=0; char UART5_RX_BUF[UART5_REC_LEN]; u8 UART5_ ...
- 你不知道的CSS单位
CSS中大部分属性值都有对应的量词单位,常见的如描述盒模型尺寸的 width, height, margin, padding, border,又比如CSS3中的transform属性的一些值.下面的 ...
- 一起学爬虫——通过爬取豆瓣电影top250学习requests库的使用
学习一门技术最快的方式是做项目,在做项目的过程中对相关的技术查漏补缺. 本文通过爬取豆瓣top250电影学习python requests的使用. 1.准备工作 在pycharm中安装request库 ...