【j2ee】div浮动层拖拽
2013-06-19 19:34
141 查看
背景:近期项目中需要实现弹出浮层增加数据,并且浮动层可以拖拽
解决步骤:1、浮动层实现 2、拖拽实现
多方查资料,基本实现功能,现做demo,便于以后使用
先上图片大体展示实现效果:
再上代码,展示我的实现思路:
DragAndDrop.html
DragDiv.js
UploadFile.css
注:拖拽的实现是在网上查资料找到的,做了一些小的改动,大意了忘记留下学习地址了
以上使用到的代码,看着还是比较简单的,但是你理解吗?至少我还是有问题的
问题:
首次拖拽总是不灵活,需要多晃动几次鼠标才有效,为什么呢?待解决
解决步骤:1、浮动层实现 2、拖拽实现
多方查资料,基本实现功能,现做demo,便于以后使用
先上图片大体展示实现效果:
再上代码,展示我的实现思路:
DragAndDrop.html
<!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"> <title>浮动层拖拽</title> <script src="DragDiv.js" type="text/javascript" language="javascript" charset="UTF-8"></script> <link href="UploadFile.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function openFuCeng() { document.getElementById("moveFile").style.display = "block"; document.getElementById("shadow2").style.display = "block"; } function closeDiv() { document.getElementById("moveFile").style.display = "none"; document.getElementById("shadow2").style.display = "none"; } </script> </head> <body> <div id="dragAndDrop"> <!-- 浮层开始 --> <div id="moveFile" class="moveFile"> <div class="toolbarHeight" onmousedown="down('moveFile')"> <label>鼠标拖拽可移动</label> </div> <div style="width:100%;height:85px; "> <p>浮动层</p> </div> <div class="fucengDiv" > <input class="toobarBtn" type="button" value="关闭" onclick="javascript:closeDiv()"/> </div> </div> <div id="shadow2"></div> <!-- 浮层结束 --> <div></div> <input type="button" value="点击展示浮层" onclick="javascript:openFuCeng()" style="margin-top: 20px;"> <p>底层页面</p> </div> </body> </html>
DragDiv.js
/** * 浮层拖拽 */ var px = 0; var py = 0; var begin = false; //是否要开启透明效果 var enableOpacity = false; // 默认不允许 var myDragDiv; /** * 浮层拖拽 * @param divid 待拖拽对象id */ function down(divid) { myDragDiv=document.getElementById(divid);//获得被拖拽对象 begin = true; myDragDiv.style.cursor = "hand"; event.srcElement.setCapture(); px = myDragDiv.style.pixelLeft - event.x;//pixelLeft py = myDragDiv.style.pixelTop - event.y; } document.onmousemove=function() { if (myDragDiv != null && typeof (myDragDiv) != "undefined") { if (begin&&(px + event.x)>10) { if (enableOpacity) { myDragDiv.style.filter = "Alpha(opacity=30)"; } // 滤镜 myDragDiv.style.pixelLeft = px + event.x; myDragDiv.style.pixelTop = py + event.y; } } } document.onmouseup=function() { if (myDragDiv != null && typeof (myDragDiv) != "undefined") { begin = false; if (enableOpacity) { myDragDiv.style.filter = "Alpha(opacity=100)"; } // 滤镜 myDragDiv.style.cursor = "default"; event.srcElement.releaseCapture(); myDragDiv = null; } }
UploadFile.css
@CHARSET "UTF-8"; #dragAndDrop{ margin: 0 auto; width: 300px; height: 200px; margin-top:200px; text-align:center; background:#98fb98 ; border: 2px solid black; } /*文件整体大小*/ #shadow2{ display: none; background:white; opacity:0.2; filter:alpha(opacity=20); position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:996;/*z-index position display 共同实现层的浮动 */ margin: 0 auto; } /*移动浮层*/ .moveFile{ display: none; width: 150px; height: 160px; position: absolute; z-index:997; border: 2px solid black; background:#FFF; top:50%; margin-top:-50px; left:50%; margin-left:-50px; } .toolbarHeight{ height: 25px; width: 100%; border-bottom:#b7e3f2 1px solid; background:#98fb98 ; } .toobarBtn{ float: right; margin-right: 10px; } .fucengDiv{ width:100%; height: 30px; padding-top: 5px; border-top:#b7e3f2 1px solid; }
注:拖拽的实现是在网上查资料找到的,做了一些小的改动,大意了忘记留下学习地址了
以上使用到的代码,看着还是比较简单的,但是你理解吗?至少我还是有问题的
问题:
首次拖拽总是不灵活,需要多晃动几次鼠标才有效,为什么呢?待解决
相关文章推荐
- javascript:浮动div,可拖拽div,遮罩层(div和iframe实现)
- javascript:浮动div,可拖拽div,遮罩层(div和iframe实现)
- javascript 实现WINDOWS 风格的可拖拽的DIV浮动窗口
- javascript:浮动div,可拖拽div,遮罩层(div和iframe实现)
- 让div在select控件上浮动(iframe垫底)
- div+css中的为什么要设置浮动属性,浮动完了为什么又要清除浮动
- 最简单的通用浮动 悬浮 DIV 层
- 使用JavaScript动态创建正弦图像,还有div拖拽功能,欢迎评价~!
- DIV浮动窗口代码
- div三栏布局左中右通过float浮动来设置
- Div 拖拽
- 还只会div+css浮动布局吗?你OUT了!听"老罗"讲解inline-block布局技术
- div+css顶部固定浮动
- 实现Flex中div浮动层效果的操作
- jsp页面div浮动弹出
- jQuery使用drag效果实现自由拖拽div
- 解决子级用css float浮动 而父级div没高度不能自适应高度
- CSS 实现DIV浮动定位不闪
- div浮动在最下面
- 一个作为容器的div 至少应包含一个位设置浮动的div