可移动的DIV层

来源:互联网 发布:信封打印软件免费版 编辑:程序博客网 时间:2024/04/30 11:05

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" onmousedown='mouseDown("subField", event)' >Title</div>

</div>

原创粉丝点击