Beat Niedermann: Layer drag&drop

Beitrag lesen

Ich habe versucht, das folgende Skript (ursprünglich für NN4/IE geschrieben) für die neuen Browser mit DOM anzupassen. Unter IE5 geht's nur, wenn ie=true gesetzt wird. Unter Mozilla tut sich gar nichts, der Layer kann gar nicht angeklickt werden.

Irgend etwas in meiner DOM-Programmierung stimmt nicht, aber was? Wer kann mir helfen?

<html>
<head>
<style type="text/css"><!--
#pos {position:absolute; index:110; left:26px; top:366px; width:16px; height:16px;}
--></style>

<script language="JavaScript1.2" type="text/javascript">
//Browsererkennung
var nn=false, ie=false, dom=false;
var BrowserName=navigator.appName, BrowserVersion=navigator.appVersion, intBrowserVersion=parseInt(BrowserVersion);
var MSVers=parseInt(BrowserVersion.slice(22,23));
var MSIE=BrowserVersion.slice(17,21);
var s=new String('');
if (BrowserName.indexOf('Microsoft') != -1 && intBrowserVersion <= 4 && MSVers<5) {
  ie=true;
}
else {
  if ((MSIE="MSIE" && MSVers>=5) || intBrowserVersion >= 5) {
    dom=true;
  }
  else { nn=true; }
}
function setLeft(id,value){
  if (dom) {
    p=eval(document.getElementById(id));
 p.style.left=value+"px";
  }
  else {
    if(nn) p=document.layers[id];if(ie)p=document.all[id].style; p.left=parseInt(value);
  }
}
function getLeft(id){
  if(dom) {
    p=eval(document.getElementById(id));
 return parseInt(p.style.left);
  }
  else {
    if(nn)p=document.layers[id];if (ie) p=document.all[id].style; return parseInt(p.left);
  }
}

function captureMouse() {
if (dom) {
 pObj=eval(document.getElementById("pos"));
 pObj.xpos=pObj.style.left+"px";
 pObj.ypos=pObj.style.top+"px";
 pObj.w=pObj.style.width+"px";
 pObj.h=pObj.style.height+"px";
}
if (nn) {
 pObj=document.pos;
 pObj.xpos=pObj.left;
 pObj.ypos=pObj.top;
 pObj.w=pObj.clip.width;
 pObj.h=pObj.clip.height;
}
if (ie) {
 pObj=document.all["pos"].style;
 pObj.xpos=pObj.pixelLeft;
 pObj.ypos=pObj.pixelTop;
 pObj.w=pObj.pixelWidth;
 pObj.h=pObj.pixelHeight;
}
dragActive=false;
document.onmousemove=mouseMove;
document.onmousedown=mouseDown;
document.onmouseup=mouseUp;
if (nn) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}

function mouseDown(e) {
if ((nn)&&(e.which!=1)) return;
if (nn || dom) {var x=e.pageX, y=e.pageY;}
if (ie) {var x=event.x+document.body.scrollLeft, y=event.y+document.body.scrollTop;}
if (pObj==null) return;
dragClickX=x-pObj.xpos;
var l=getLeft("pos");
if (x>=pObj.xpos && x<=pObj.xpos+11) {
 dragActive=true;
 fDragged=true;
 //if (fDragHintVis) hideLayer("draghint");
}
}

function mouseMove(e) {
if (nn || dom) { Xpos=e.pageX; Ypos=e.pageY; }
if (ie) { Xpos=event.x+document.body.scrollLeft; Ypos=event.y+document.body.scrollTop; }

if ((dragActive) && (pObj!=null)) {
 pObj.xpos=Xpos-dragClickX;
 pObj.left=pObj.xpos;
 //moveContent(pObj.xpos);
 return false;
}
}

function mouseUp(e) {
if (dragActive) {
 dragActive=false;
 var l=getLeft("pos");
 if (l<0) setLeft("pos",0);
 if (l>760) setLeft("pos",760);
}
}
</script>
</head>

<body>
<div id="pos" style="position:absolute; left:26px; top:366px;"><img src="gif/pos.gif" width=16 height=16 border=0 alt="<--Menü-->"></div>
<script language="JavaScript1.2" type="text/javascript"><!--
captureMouse();
//--></script>
</body>
</html>