不让移动的div移出body

让div在body中任意拖动

HTML代码 <div id="idOuterDiv" class="CsOuterDiv"> </div> CSS代码 body { background-color:#232429; } .CsOuterDiv { width:256px; height:146px; background-color:white; position:absolute; top:50%; left:50%; transform:translateX(-50

点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）

效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再赋予DIV的位置.最后关闭鼠标onmouseup事件. 代码: <head runat="server"> <title></title> <style type="text/css"> #div1 { width: 20

原生js及H5模拟鼠标点击拖拽

一.原生js 1.拖拽的流程动作鼠标按下触发onmousedown事件鼠标移动触发onmousemove事件鼠标松开触发onmouseup事件 2.注意事项: 要防止div移出可视框,要限制div移动的横纵坐标: 防止火狐的bug, 要在最后写上return false,阻止默认事件: 防止鼠标运动时移出div,所以要用document.onmousemove和document.onmouseup,不能用oDiv.onmousemove; 3.代码实现: html: <div id=

JS实现拖拽功能

本文代码地址(第一节):https://github.com/dirstart/js-exam/blob/master/%E6%8B%96%E6%8B%BDdiv1.html 第二节:https://github.com/dirstart/js-exam/blob/master/%E6%8B%96%E6%8B%BDdiv2.html 第三节:https://github.com/dirstart/js-exam/blob/master/%E6%8B%96%E6%8B%BDdiv3.html 本来

setTimeout应用例子-移入移出div显示和隐藏

效果:移入div1,div2保持显示,移出div1,div2消失. 移入div2,div2保持显示,移出div2,div2消失. 一.HTML代码 <div id='div1'></div> <div id='div2'></div> 就g只有两个div模块,移入一个,显示另外一个. 二.CSS代码给两个div抹上颜色,便于区别,在css里,我设置了float 属性,定义元素在左边方向浮动 #div1{ height:50px; background:gr

div展现与收起效果（鼠标移入移出）

效果图: 移入: 移出: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移入移出展现与收起效果</title> <style type="text/css"> body{ margin: 0 auto; padding: 0; } #pn{ background: #

jQuery事件-div的显示隐藏及鼠标的移入移出

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

函数传参，改变Div任意属性的值&&图片列表：鼠标移入/移出改变图片透明度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变

思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态添加/去除这个类名,实现div样式改变. <style> body{color:#fff;font:12px/1.5 Tahoma;} #div1{ width:150px; height:150px; margin:0 auto; padding:10px; background:black; border:10px sol

jQuery 移入显示div，移出当前div，移入到另一个div还是显示。

jQuery 移入移出操作div 1 <style type="text/css"> 2 .box{ 3 position: relative; 4 } 5 .box1{ 6 width: 80px; 7 height: 80px; 8 border: 1px solid red; 9 } 10 .box2{ 11 width: 200px; 12 height: 200px; 13 background-color: blue; 14 position: absolut

3个div 宽度移入移出时变化

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div变宽</title> <style> div{ width: 100px;height: 60px; background-color: green; margin-top: 20px; } </style></head>

鼠标移入移出div div会消失的处理

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style > #div1{width: 400px;height: 40px;background-color: red;} #div2{width: 250px;height: 30px;background-color:

js：鼠标移动到文字显示div，移出文字div显示，鼠标能移进div

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>DIV弹出层</title> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"></head>&l

div鼠标悬停，子元素上移，鼠标移出，子元素下移动画。

HTML: <div class="edt_title" > <div id="edt_title"> <p class="edt_title_top">e定投</p> <div class="product_line"></div> <p class="edt_title_c"> 多种期限<br /><b

CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部分

问题总结: 1. checkbox和下面隐藏的div对齐,是在清除了默认样式的前提下,而不需要额外设置float: left; 2. 隐藏的div这里不需要专门设置宽高.居中,是靠内容和padding撑起来的尺寸.外层div居中,内层跟着居中. <style> *{margin:0;padding:0;} // 后来添加的 body{ font-size: 12px; } #outer{ margin: 10px auto; width: 180px; } /* #login input, #

实现点击后创建div，若对div2秒无操作则将div隐藏，鼠标移上div让它不隐藏，移出div超过两秒则div隐藏

$('.addLabel').on('click', function () { setTimeout(function(){ if(hoverflag==0){ $(".labelHide").hide() } return; },2000); $(".labelHide").show(); $(".labelHide").hover(function(){ hoverflag=1; $(".labelHide").show

冒泡，setinterval，背景图的div绑定事件，匿名函数问题

1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b").click(function(){alert("b")}) $("#c1").click(function(){alert("c1")}) $("#c2").click(function(){alert("c2&q

重叠div鼠标经过事件

两个div重叠了,但是下面的div有鼠标移入移出事件,发现当鼠标移入或者移出时事件会执行两次,尝试了在上层div阻止事件,判断div所在位置……,后来发现只要一个css属性即可解决该问题,在上层div中设置pointer-events:none;阻止鼠标事件

实现Div拖拽

直观的理解div拖拽:当鼠标对着可拖拽部分按住后并拖动,div会跟着鼠标一起运动,并且其运动空间限制在浏览器内部,当放开鼠标时,则div停止运动. 实现div拖拽需要三个重要的事件: (1)onmousedown-鼠标按下事件 (2)onmousemove-鼠标移动事件 (3)onmouseup-鼠标抬起事件当鼠标移出浏览器后再回到浏览器内部时,会丢失对div的控制,需要再次按下鼠标移动div,为了改善这一小问题,代码中使用了setCapture和releaseCapture. 其中,setC

两个div叠加触发事件发生闪烁问题

今天遇到一个问题,想实现一个功能: 当鼠标移到div1上的时候,会出现div2.出现时div2在div1的上面,div2在出现后发生闪烁的问题. 于是开始找问题根源,发现原来是因为当我们触发div1的时候,div2出现,但是div2是存在于div1上面的,所以当div2出现后,会又一次触发下面div1的事件.通常我们可能给的事件是mouseover和mouseout,因为两个div叠加,div2出现时会多次触发div1的事件,所以就会发生闪烁问题. 解决: 1.一开始换mouseenter和mo

JS鼠标移入，移出事件

该事件的效果就像百度首页的设置选项,当鼠标移入,移出时的效果,废话不多说了,直接上码. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>百度</title> <style type="text/css">····························

不让移动的div移出body

热门专题