var obj = null;
var dX = 0;
var dY = 0;
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
function mouseDown(varCurId, currEvt) {
obj = document.getElementById(varCurId);
if (getBrowserType() == "FOX") {
dX = currEvt.pageX - parseInt(obj.style.left);
dY = currEvt.pageY - parseInt(obj.style.top);
} else {
dX = obj.style.pixelLeft - event.x;
dY = obj.style.pixelTop - event.y;
}
}
function mouseMove(currEvt) {
if (obj) {
if (getBrowserType() == "FOX") {
if (currEvt.pageX - dX < -5 || currEvt.pageY - dY < -5) {
mouseDown(obj.id, event);
} else {
obj.style.left = currEvt.pageX - dX;
obj.style.top = currEvt.pageY - dY;
}
} else {
if (dX + event.x < -5 || dY + event.y < -5) {
if (dX + event.x < event.x - 10 && dY + event.y < event.y - 10) {
mouseDown(obj.id);
}
} else {
obj.style.left = dX + event.x;
obj.style.top = dY + event.y;
event.returnValue = false;
}
}
}
}
function mouseUp() {
if (obj) {
obj = null;
}
}
function getBrowserType() {
var varBrowser = navigator.appName
if (varBrowser == "Netscape") {
return "FOX";
} else if(varBrowser == "Microsoft Internet Explorer") {
return "IE";
} else {
return "NSupport";
}
}
<div id="subField" class="showField" style="top: 50; left: 100; width: 80%; height: 70%; padding: 5px;">
<div class="captionBarBg" οnmοusedοwn='mouseDown("subField", event)' >Title</div>
</div>