【j2ee】div浮动层拖拽

背景:近期项目中需要实现弹出浮层增加数据,并且浮动层可以拖拽

解决步骤:1、浮动层实现  2、拖拽实现

多方查资料,基本实现功能,现做demo,便于以后使用

先上图片大体展示实现效果:

【j2ee】div浮动层拖拽_第1张图片


再上代码,展示我的实现思路:

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;
}

注:拖拽的实现是在网上查资料找到的,做了一些小的改动,大意了忘记留下学习地址了

以上使用到的代码,看着还是比较简单的,但是你理解吗?至少我还是有问题的

问题:

首次拖拽总是不灵活,需要多晃动几次鼠标才有效,为什么呢?待解决

你可能感兴趣的:(【j2ee】div浮动层拖拽)