可移动的DIV层

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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值