解决拖拽有内容的div的bug和兼容问题
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #289c97 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4a8a01 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #060606 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151; min-height: 36.0px }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4f5d66 }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #a5b2b9 }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4663cc }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #e48b00 }
p.p12 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #698906 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.s6 { color: #000000 }
span.s7 { color: #060606 }
span.s8 { color: #929151 }
span.s9 { color: #ad42ef }
span.s10 { color: #698906 }
span.s11 { color: #4a8a01 }
span.s12 { color: #d16400 }
span.s13 { color: #4663cc }
span.s14 { color: #b58a00 }
span.s15 { color: #a5b2b9 }
span.s16 { color: #e48b00 }
span.Apple-tab-span { white-space: pre }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#big {
height: 800px;
width: 800px;
background-color: #008000;
position: relative;
}
#small {
height: 100px;
width: 100px;
background-color: orangered;
position: absolute;
}
</style>
</head>
<body>
<div id="big">
拖拽有内容的div，在浏览器上都会有bug 解决FF和chrome上的bug只需要加上return false就可以了 解决低版本IE上的bug就需要用到事件捕获setCapture和释放捕获releaseCapture() 为了解决兼容问题就需要做一个判断，需要两套代码
<div id="small">
解决FF和chrome上的bug只需要加上return false就可以了
</div>
</div>
</body>
<script type="text/javascript">
//拖拽有内容的div，在浏览器上都会有bug
//解决FF和chrome上的bug只需要加上return false就可以了
//解决低版本IE上的bug就需要用到事件捕获setCapture和释放捕获releaseCapture()
//为了解决兼容问题就需要做一个判断，需要两套代码
var big = document.getElementById("big");
var small = document.getElementById("small");
//鼠标按下的函数
var x = 0;
var y = 0;
small.onmousedown = function(ev) {
var oEvent = ev || event;
x = oEvent.clientX - small.offsetLeft;
y = oEvent.clientY - small.offsetTop;
if(small.setCapture) { //在IE下
//鼠标移动的函数
small.onmousemove = mouseMove;
//鼠标抬起的函数
small.onmouseup = mouseUp;
//解决IE下有内容的拖拽情况下的bug
//用到捕获
small.setCapture();
} else { //在火狐下
//鼠标移动的函数
document.onmousemove = mouseMove;
//鼠标抬起的函数
document.onmouseup = mouseUp;
//return false可以解决有内容的拖拽情况下的bug
//但是对IE不适用
return false;
}
}
//定义一个鼠标移动的函数
function mouseMove(ev) {
var oEvent = ev || event;
var L = oEvent.clientX - x;
var T = oEvent.clientY - y;
//保证small不被拖出大框，并且实现磁性吸附的效果
if(L < 100) {
L = 0;
} else if(L > big.offsetWidth - small.offsetWidth) {
L = big.offsetWidth - small.offsetWidth;
}
if(T < 100) {
T = 0;
} else if(T > big.offsetHeight - small.offsetHeight) {
T = big.offsetHeight - small.offsetHeight;
}
small.style.left = L + "px";
small.style.top = T + "px";
}
//定义一个鼠标抬起的函数
function mouseUp(ev) {
this.onmousemove = null;
this.onmouseup = null;
//释放捕获,只在IE下适用，所以要做一个判断
if(this.releaseCapture) {
this.releaseCapture();
}
}
</script>
</html>
解决拖拽有内容的div的bug和兼容问题的更多相关文章
- 如何解决拖拽或者缩放、移动中的组件canvas有残留情况
当我们在做某些需求,如要拖动echarts图表,或者放大缩小 这个时候,有时连续操作,或者在ie或者内存只有8G的电脑上就会出现canvs残留的情况 我们移动的时候,使用的是transform去做的移 ...
- 理解事件捕获。在限制范围内拖拽div+吸附+事件捕获
一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...
- 【j2ee】div浮动层拖拽
背景:近期项目中需要实现弹出浮层增加数据,并且浮动层可以拖拽 解决步骤:1.浮动层实现 2.拖拽实现 多方查资料,基本实现功能,现做demo,便于以后使用 先上图片大体展示实现效果: 再上代码,展示 ...
- js拖拽效果详细讲解
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 使用jQuery Draggable和Droppable实现拖拽功能
上篇博客中已经介绍了web开发中基本拖放原理,现在给出需要完成的功能.最后运行的效果如下图所示: 主要功能需求说明: 1.左侧的元素结构最后会通过Ajax call服务器的数据来生成,能支持多级元素. ...
- JS—实现拖拽
JS中的拖拽示例: 1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变 2)实现拖拽遇到的问题: 问题1:当鼠标按下移动过快时,离开了拖拽的物体时 ...
- 打造 html5 文件上传组件，实现进度显示及拖拽上传，支持秒传+分片上传+断点续传，兼容IE6+及其它标准浏览器
老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery ...
- JQUERY 拖拽 draggable droppable resizable selectable sortable
今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下: <script language="JavaScript" type="text/ ...
- 前端vue拖拽
工作上遇到的需求:页面上需要拖拽一个小方块div拷贝至保存的容器中. 一.可拖拽 那么我们需要对小方块div进行授权,设置draggable="true"允许其被拖动 二.定义拖拽 ...
随机推荐
- Java入门记(三)：初始化顺序
初始化顺序的规则 1.在一个类的对象实例化时,成员变量首先初始化,然后才调用构造器,无论书写顺序.如果调用构造器前,没有显式初始化,那么会赋默认值. 这样做法的原因可以理解为:构造器执行时可能会用到一 ...
- smbclient提示NT_STATUS_INSUFFICIENT_RESOURCES
Rhel6中使用smbclient命令打开windows共享文件夹,出现: Linux Samba protocol negotiation failed: NT_STATUS_INSUFFICIEN ...
- VFP MSSOAPTOOKIT 使用SOAP Headers
.NET 有如下使用了自定义扩展HEADER来做验证 server.asmx代码 using System;using System.Collections.Generic;using System ...
- 策划了个.NET控件的案例大赛
任何一个产品的普及,都有一个过程: 1. 对新事物充满热情.喜欢尝鲜.或后急迫需要的人首先成为产品用户.他们总数很少,但是是产品用户的第一批种子. 2. 思想比较开放.能接受新事物的人会成为第二批用户 ...
- FP 某段SQL语句执行时间超过1个小时，并报错：ORA-01652: 无法通过 128 (在表空间 TEMPSTG 中) 扩展
一.出现如下两个错误:1.某一段SQL语句执行时间超过1个小时:2.一个小时后,提示如下错误:ORA-01652: 无法通过 128 (在表空间 TEMPSTG 中) 扩展 temp 段ORA-065 ...
- Magento1.9批量修改产品 Attribute Set
今天修改产品时遇到这样一个需求:重新设置产品的 Attribute Set,使用的是Magento1.9系统,Magento提供这样一个插件 Flagbit Change Attribute Set: ...
- Js文件中文乱码
aspx页面引用的js文件中如果包括中文,中文显示乱码或者引起脚本错误.提示是'未结束的字符串' 原因:aspx页面的默认编码是utf-8,而js文件的默认编码是gb2312,两者之间不一致引起了中文 ...
- SpringMVC的controller方法上若需要参数 如User
Bean: public class User { private String name; private String password; public String getN ...
- CURL详解（转载）
curl_setop()函数中的参数中文说明 curl_setop()函数中的参数中文说明 curl_setopt()函数将为一个CURL会话设置选项.option参数是你想要的设置,value是这个 ...
- iOS错误总结（三）
1.如果tableView设置为分组的样式(默认是有cell之间的分割线,可以设置颜色),默认有组以及组尾的高度 需要手动在组头组尾的代理方法中进行组高的设置(如果想设置为0,最好写0.01) 2.组 ...