【j2ee】div浮动层拖拽

时间：2022-01-29 17:29:12

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

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

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

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

【j2ee】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;

}

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

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

问题：

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

相关文章