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和兼容问题的更多相关文章

  1. 如何解决拖拽或者缩放、移动中的组件canvas有残留情况

    当我们在做某些需求,如要拖动echarts图表,或者放大缩小 这个时候,有时连续操作,或者在ie或者内存只有8G的电脑上就会出现canvs残留的情况 我们移动的时候,使用的是transform去做的移 ...

  2. 理解事件捕获。在限制范围内拖拽div+吸附+事件捕获

    一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...

  3. 【j2ee】div浮动层拖拽

    背景:近期项目中需要实现弹出浮层增加数据,并且浮动层可以拖拽 解决步骤:1.浮动层实现  2.拖拽实现 多方查资料,基本实现功能,现做demo,便于以后使用 先上图片大体展示实现效果: 再上代码,展示 ...

  4. js拖拽效果详细讲解

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 使用jQuery Draggable和Droppable实现拖拽功能

    上篇博客中已经介绍了web开发中基本拖放原理,现在给出需要完成的功能.最后运行的效果如下图所示: 主要功能需求说明: 1.左侧的元素结构最后会通过Ajax call服务器的数据来生成,能支持多级元素. ...

  6. JS—实现拖拽

    JS中的拖拽示例:    1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变    2)实现拖拽遇到的问题:        问题1:当鼠标按下移动过快时,离开了拖拽的物体时 ...

  7. 打造 html5 文件上传组件，实现进度显示及拖拽上传，支持秒传+分片上传+断点续传，兼容IE6+及其它标准浏览器

    老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery ...

  8. JQUERY 拖拽 draggable droppable resizable selectable sortable

    今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下:   <script language="JavaScript" type="text/ ...

  9. 前端vue拖拽

    工作上遇到的需求:页面上需要拖拽一个小方块div拷贝至保存的容器中. 一.可拖拽 那么我们需要对小方块div进行授权,设置draggable="true"允许其被拖动 二.定义拖拽 ...

随机推荐

  1. CSS中如何让元素隐藏

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.下面一个个列出,选一个适合你的 { display: none; /* 不 ...

  2. 关于Onvif的event

    昨天又仔细研究了一下camera的alarm功能,发现原来很简单,首先订阅一下,即create,拿到订阅号后直接pull,一旦收到信息就再次用订阅号pull.参考http://www.doc88.co ...

  3. 用于模式匹配的String方法

    String支持四种使用正则表达式的方法. 1.search()返回第一个与之匹配的子串的起始位置,找不到返回-1.search()参数是一个正则表达式,如果参数不是正则表达式,则会先通过RegExp ...

  4. 将C#datagridview控件的数据导出到Excel中

    1.添加引用Microsoft.Office.Interop.Excel. 2.程序代码引用using Excel = Microsoft.Office.Interop.Excel; 3.控件事件代码 ...

  5. win8 系统无法正常安装.net framework 2.0和3.0框架如何解决

    在安装.net framework2.0框架的时候一直提示要用户从网上面下载框架,你点击下载好的安装包也是无法安装的.这个时候就需要你使用离线的安装包来进行问题的解答附件在此http://pan.ba ...

  6. Markdown 快速入门

    使用Markdown编辑器:MarkdownPad 2 标题: # 标题 ## 标题 ### 标题 #### 标题 ##### 标题 ###### 标题 效果: 标题 标题 标题 标题 标题 标题 下 ...

  7. WCF在tcp通道下启用httpget

    关于tcp通道下,启用httpget,必须启用一个http的基地址,如果要启用元数据交换,host中必须开启服务描述. //01 create host Uri tcpBaseAddress = ne ...

  8. @ModelAttribute 注解及 POJO入参过程

    一.modelattribute注解 @ModelAttribute注解的方法有两种,一种无返回值,一种有返回值,方法的可以用@RequestParam注解来获取请求的参数,如果不获取参数,可以不用此 ...

  9. keepalived+nginx高可用负载均衡环境搭建

    上篇说道keepalived的环境搭建,本来keepalived结合lvs更有优势,但是也可以结合nginx来使用.下面接着说下nginx的环境搭建 环境信息: nginx(master)  192. ...

  10. 直接用<img> 的src属性显示base64转码后的字符串成图片

    直接用<img> 的src属性显示base64转码后的字符串成图片 <img src="base64转码后的字符串" ></img> 下面的图片 ...