根据鼠标位置偏移量来计算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;
}
}