欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【j2ee】div浮动层拖拽 博客分类: javaWeb知识总结 div拖拽

程序员文章站 2024-03-22 21:13:22
...

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

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

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

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

【j2ee】div浮动层拖拽 
            
    
    博客分类: javaWeb知识总结 div拖拽

 

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

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

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

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

问题:

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

相关标签: div 拖拽