【j2ee】div浮动层拖拽 博客分类: javaWeb知识总结 div拖拽
程序员文章站
2024-03-22 21:13:22
...
背景:近期项目中需要实现弹出浮层增加数据,并且浮动层可以拖拽
解决步骤: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; }
注:拖拽的实现是在网上查资料找到的,做了一些小的改动,大意了忘记留下学习地址了
以上使用到的代码,看着还是比较简单的,但是你理解吗?至少我还是有问题的
问题:
首次拖拽总是不灵活,需要多晃动几次鼠标才有效,为什么呢?待解决