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 ...
随机推荐
- 第二节:框架前期准备篇之AutoFac常见用法总结
一. 说在前面的话 凡是大约工作在两年以上的朋友们,或多或少都会接触到一些框架搭建方面的知识,只要一谈到框架搭建这个问题或者最佳用法这个问题,势必会引起一点点小小的风波,我说我的好,他说他的好,非常容 ...
- NSE: known a priori estimate
1. Leray-Hopf $u\in L^\infty(0,T;L^2(\bbR^3))\cap L^2(0,T;H^1(\bbR^3))$. See [Leray, Jean. Sur le mo ...
- rem是怎么计算的
「rem」是指根元素(root element,html)的字体大小,从遥远的 IE6 到版本到 Chrome 他们都约好了,根元素默认的 font-size 都是 16px. rem是通过根元素进行 ...
- MacOS下好用的截图软件snip
1 官网下载,腾讯出的 https://snip.qq.com/ 2 下一步下一步安装就好,然后设置一下自己喜欢的快捷键,我的是command + control+J,选择自己喜欢的或者默认都可以 3 ...
- 【linux】基础知识
为什么学习Linux? 服务器大多数都是linux操作系统,学习[上线][运维]是我们前端开发工程师的必备技能.Linux系统和maxOS系统十分类似,所以推荐大家使用max电脑工作. Linux的版 ...
- 一些Js操作
一.after()和before()方法的区别 after()——其方法是将方法里面的参数添加到jquery对象后面去: 如:A.after(B)的意思是将B放到A后面去: before( ...
- Django-3-Template模板
模板是html文档+Django逻辑语句的组合. 一.变量和标签 变量通过{{ }}来表示,两个大括号中间是变量名. 标签通过{% %}来表示,就是Python中的函数和方法. 常用标签: {% fo ...
- EF6 CodeFirst使用MySql
如何使用EF CodeFirst连接MySql数据库? 环境:VS2015.Win7..NetFramework4.5.2.MySql5.6 一.基本操作 1.创建MVC5项目:ZmsoftsWebM ...
- 求逆序对常用的两种算法 ----归并排 & 树状数组
网上看了一些归并排求逆序对的文章,又看了一些树状数组的,觉得自己也写一篇试试看吧,然后本文大体也就讲个思路(没有例题),但是还是会有个程序框架的 好了下面是正文 归并排求逆序对 树状数组求逆序对 一. ...
- ES--08
71.内核原理探秘_最后优化写入流程实现海量磁盘文件合并(segment merge,optimize) 课程大纲 每秒一个segment file,文件过多,而且每次search都要搜索所有的seg ...