拖拽demo--兼容--全局捕获
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
} html,
body {
height: 100%;
overflow: hidden;
} #box {
position: absolute;
width: 150px;
height: 150px;
background-color: orangered;
}
</style>
</head> <body>
略略略
<div id="box"></div> <script>
window.onload = function () {
var box = document.getElementById("box"); box.onmousedown = function (e) {
e = e || window.event;
var mouseDownPoint = { "x": 0, "y": 0 };
var boxStartPoint = { "x": 0, "y": 0 }; boxStartPoint.x = this.offsetLeft;
boxStartPoint.y = this.offsetTop; mouseDownPoint.x = e.clientX;
mouseDownPoint.y = e.clientY; // 使用全局捕获，阻止ie8以下浏览器事件的默认行为
if (this.setCapture) {
this.setCapture();
} document.onmousemove = function (e) { e = e || window.event;
var mouseMovePoint = { "x": 0, "y": 0 }; mouseMovePoint.x = e.clientX;
mouseMovePoint.y = e.clientY; box.style.left = mouseMovePoint.x - mouseDownPoint.x + boxStartPoint.x + "px";
box.style.top = mouseMovePoint.y - mouseDownPoint.y + boxStartPoint.y + "px"; return false; // 无法禁止ie8以下浏览器事件的默认行为
} document.onmouseup = function () {
document.onmousemove = document.onmouseup = null; if (document.releaseCapture) { // 取消全局捕获
document.releaseCapture();
} }
}
}
</script>
</body> </html>
兼容ie8，使用全局捕获，阻止ie8以下浏览器事件的默认行为
拖拽demo--兼容--全局捕获的更多相关文章
- 写一个兼容性比较好的拖拽DEMO
写一个兼容性比较好的拖拽DEMO 查看Demo 思路 div盒子 鼠标按下事件onmousedown 鼠标移动事件onmousemove,获得鼠标的坐标,将div移动至鼠标的当前坐标 鼠标抬起事件om ...
- 理解事件捕获。在限制范围内拖拽div+吸附+事件捕获
一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...
- angular ng-repeat+sortable 拖拽demo
由于项目需求,需要使用angular 实现列表的增.删.改,并且列表支持拖拽. 看了下angular-ui 里面的sortable组件,使用起来也是非常简单,几十行代码就完成了所需功能. 我现在懒得想 ...
- html5 - drag 拖拽
参考资料: 张鑫旭 : http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B% ...
- jquery插件之拖拽
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可 ...
- 移动端拖拽（模块化开发，触摸事件，webpack）
通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...
- 自己写一个jqery的拖拽插件
说实话,jQuery比原生的js好用多了,本来想用原生写的,也写出来的,仅仅是,感觉不像插件,所以用jQuery实现了一版. 实现的功能:能够指定拖拽的边界,在拖拽过程中,能够触发几个自己定义事件 先 ...
- 原生Js实现拖拽（适用于pc和移动端）
效果: HTML和CSS部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 解决拖拽有内容的div的bug和兼容问题
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...
随机推荐
- snmpd 子代理模式编译测试
1.参考链接 1)Net-snmp添加子代理示例 https://blog.csdn.net/eyf0917/article/details/39546651 2.操作步骤 1)网络拷贝下面的文件 ...
- Zookeeper--集群管理
Zookeeper--集群管理 在多台服务器组成的集群中,需要监控每台服务器的状态,一旦某台服务器挂掉了或有新的机器加入集群,集群都要感知到,从而采取相应的措施.一个主动的集群可以自动感知节点的死亡和 ...
- SpringMVC-Spring-Hibernate项目搭建之一-- 搭建maven 项目 & servlet的demo
一. 搭建maven项目 1. 新建maven项目,选择maven Project --> Next 2. 勾选 Create a simple project --> Next 3. ...
- HDU 1166 敌兵布阵 （线段树模版题）
敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- span 右浮动折行 解决ie6/7中span右浮动折行问题
RM8005: IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部 标准参考 W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻 ...
- Django-MTV模型
MTV模型 Django的MTV分别代表: Model(模型):负责业务对象与数据库的对象(ORM) Template(模版):负责如何把页面展示给用户 View(视图):负责业务逻辑,并在适当的时候 ...
- abbreviation
1. ps------process status 2. tty-----teletype 3. ping----packet internet groper 4. nohup-----no hang ...
- 【BZOJ】2006: [NOI2010]超级钢琴（前缀和+RMQ+堆）
题目 传送门:QWQ 分析 又不会做....... 显然很好想到前缀和处理一下. 然后考虑最大化结果,直接上st表. 问题来了,然后呢? 怎么做$ length \in [l,r] $ 呢? 正解是 ...
- hdu1010 Tempter of the Bone(深搜+剪枝问题)
Tempter of the Bone Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission( ...
- Java EE学习路线
题记: 不行动,注定是个失败者! 1.coding:servlet->jsp 通过看视频快速上手 2.reading:Thinking in java 英文版 时间协调安排: 1.上课时认真听课 ...