【j2ee】div浮动层拖拽

阅读更多

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

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

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

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

 

再上代码，展示我的实现思路：

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

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

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

问题：

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