DIV移动

根据鼠标位置偏移量来计算div的left和top。

<div id="popupDivCommon" class="ui-dialog" style="width:100%;height:100%;display:none;position: absolute;top:0px;left:0px;z-index: 103;" onmousemove="moveDiv()" onmouseup="endMoveDiv()">
    <div id="topDivId" style="display:block;width:100%;height:100%;z-index: 104; position: absolute;top:0px;left:0px;background: grey;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);"></div>	
     	<div style="left:20%;top:5%;height:3%;width:60%;position: relative;" class="ui-dialog-titlebar popup-div-bg" id= "barDiv" onmousedown="beginMoveDiv()">
     		<a class="ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all" style="cursor: pointer;" onclick="closePopUpDivForNavigateAway()">
     		<span class="ui-icon ui-icon-closethick"/>
     		</a>
     	</div>
    	<div id="commonContentDiv" style="left:20%;top:5%;height:80%; width:60%; border: 1.2px solid #5c5c5c; position: relative; z-index: 106; background: white; overflow: auto;">
    	 	<p:outputPanel id="popupDivPanel">
    	 	<ui:insert name="popupDivCommon">
				<ui:include src="blank.xhtml"/>
			</ui:insert>
			</p:outputPanel>
     	</div>
	</div>

var divStartLeft;
var divStartTop;
var contDivStartLeft;
var contDivStartTop;
var curMouseX;
var curMouseY;
var drag = false;

function beginMoveDiv() {
	var divStartLeftPer = document.getElementById('barDiv').style.left;
	var divStartTopPer = document.getElementById('barDiv').style.top;
	var divStartLeftPer2 = document.getElementById('commonContentDiv').style.left;
	var divStartTopPer2 = document.getElementById('commonContentDiv').style.top;
	var bodyWidth = document.body.clientWidth;
	var bodyHeitht = document.body.clientHeight;
	curMouseX = event.clientX;
	curMouseY = event.clientY;
	if (divStartLeftPer.indexOf('%') != -1) {
		divStartLeft = divStartLeftPer.substring(0, divStartLeftPer.indexOf('%'))/100 * bodyWidth;
	} else {
		divStartLeft = divStartLeftPer.substring(0, divStartLeftPer.indexOf('px'));
	}
	if (divStartTopPer.indexOf('%') != -1) {
		divStartTop = divStartTopPer.substring(0, divStartTopPer.indexOf('%'))/100 * bodyHeitht;
	} else {
		divStartTop = divStartTopPer.substring(0, divStartTopPer.indexOf('px'));
	}
	if (divStartLeftPer2.indexOf('%') != -1) {
		contDivStartLeft = divStartLeftPer2.substring(0, divStartLeftPer2.indexOf('%'))/100 * bodyWidth;
	} else {
		contDivStartLeft = divStartLeftPer2.substring(0, divStartLeftPer2.indexOf('px'));
	}
	if (divStartTopPer2.indexOf('%') != -1) {
		contDivStartTop = divStartTopPer2.substring(0, divStartTopPer2.indexOf('%'))/100 * bodyHeitht;
	} else {
		contDivStartTop = divStartTopPer2.substring(0, divStartTopPer2.indexOf('px'));
	}
	drag = true;
}

function moveDiv() {
	if (!drag) {
		return;
	}
	
	var mx = event.clientX;
	var my = event.clientY;
	document.getElementById('barDiv').style.left = parseInt(divStartLeft) + parseInt(mx - curMouseX) + 'px';
	document.getElementById('commonContentDiv').style.left = parseInt(divStartLeft) + parseInt(mx - curMouseX) + 'px';
	document.getElementById('barDiv').style.top = parseInt(divStartTop) + parseInt(my - curMouseY) + 'px';
	document.getElementById('commonContentDiv').style.top = parseInt(divStartTop) + parseInt(my - curMouseY) + 'px';
}

function endMoveDiv() {
	if (drag) {
		drag = false;
	}
}