Dette her er crossbrowser - håber ikke at det gør noget :)
<html>
<head>
<title>Drag layer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function findObj(theObj, theDoc)
{
var p, i, foundObj;
if(!theDoc) theDoc = document;
if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
{
theDoc = parent.frames[theObj.substring(p+1)].document;
theObj = theObj.substring(0,p);
}
if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
for (i=0; !foundObj && i < theDoc.forms.length; i++)
foundObj = theDoc.forms[i][theObj];
for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
foundObj = findObj(theObj,theDoc.layers[i].document);
if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
return foundObj;
}
function dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) {
var i,j,aLayer,retVal,curDrag=null,curLeft,curTop,IE=document.all,NS4=document.layers;
var NS6=(!IE&&document.getElementById), NS=(NS4||NS6); if (!IE && !NS) return false;
retVal = true; if(IE && event) event.returnValue = true;
if (dragLayer.arguments.length > 1) {
curDrag = findObj(objName); if (!curDrag) return false;
if (!document.allLayers) { document.allLayers = new Array();
with (document) if (NS4) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)
with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];
} else {
if (NS6) { var spns = getElementsByTagName("span"); var all = getElementsByTagName("div");
for (i=0;i<spns.length;i++) if (spns[i].style&&spns[i].style.position) allLayers[allLayers.length]=spns[i];}
for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];
} }
curDrag.dragOk=true; curDrag.targL=targL; curDrag.targT=targT;
curDrag.tol=Math.pow(tol,2); curDrag.hLeft=hL; curDrag.hTop=hT;
curDrag.hWidth=hW; curDrag.hHeight=hH; curDrag.toFront=toFront;
curDrag.dropBack=dropBack; curDrag.dropJS=dropJS;
curDrag.everyTime=et; curDrag.dragJS=dragJS;
curDrag.oldZ = (NS4)?curDrag.zIndex:curDrag.style.zIndex;
curLeft= (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
if (String(curLeft)=="NaN") curLeft=0; curDrag.startL = curLeft;
curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
if (String(curTop)=="NaN") curTop=0; curDrag.startT = curTop;
curDrag.bL=(cL<0)?null:curLeft-cL; curDrag.bT=(cU<0)?null:curTop-cU;
curDrag.bR=(cR<0)?null:curLeft+cR; curDrag.bB=(cD<0)?null:curTop+cD;
curDrag.LEFTRIGHT=0; curDrag.UPDOWN=0; curDrag.SNAPPED=false; //use in your JS!
document.onmousedown = dragLayer; document.onmouseup = dragLayer;
if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
} else {
var theEvent = ((NS)?objName.type:event.type);
if (theEvent == 'mousedown') {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
var maxDragZ=null; document.maxZ = 0;
for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
var aLayerZ = (NS4)?aLayer.zIndex:parseInt(aLayer.style.zIndex);
if (aLayerZ > document.maxZ) document.maxZ = aLayerZ;
var isVisible = (((NS4)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
if (aLayer.dragOk != null && isVisible) with (aLayer) {
var parentL=0; var parentT=0;
if (NS6) { parentLayer = aLayer.parentNode;
while (parentLayer != null && parentLayer.style.position) {
parentL += parseInt(parentLayer.offsetLeft); parentT += parseInt(parentLayer.offsetTop);
parentLayer = parentLayer.parentNode;
} } else if (IE) { parentLayer = aLayer.parentElement;
while (parentLayer != null && parentLayer.style.position) {
parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
parentLayer = parentLayer.parentElement; } }
var tmpX=mouseX-(((NS4)?pageX:((NS6)?parseInt(style.left):style.pixelLeft)+parentL)+hLeft);
var tmpY=mouseY-(((NS4)?pageY:((NS6)?parseInt(style.top):style.pixelTop) +parentT)+hTop);
if (String(tmpX)=="NaN") tmpX=0; if (String(tmpY)=="NaN") tmpY=0;
var tmpW = hWidth; if (tmpW <= 0) tmpW += ((NS4)?clip.width :offsetWidth);
var tmpH = hHeight; if (tmpH <= 0) tmpH += ((NS4)?clip.height:offsetHeight);
if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
|| maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
if (curDrag) {
document.onmousemove = dragLayer; if (NS4) document.captureEvents(Event.MOUSEMOVE);
curLeft = (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
if (String(curLeft)=="NaN") curLeft=0; if (String(curTop)=="NaN") curTop=0;
oldX = mouseX - curLeft; oldY = mouseY - curTop;
document.curDrag = curDrag; curDrag.SNAPPED=false;
if(curDrag.toFront) {
eval('curDrag.'+((NS4)?'':'style.')+'zIndex=document.maxZ+1');
if (!curDrag.dropBack) document.maxZ++; }
retVal = false; if(!NS4&&!NS6) event.returnValue = false;
} } else if (theEvent == 'mousemove') {
if (document.curDrag) with (document.curDrag) {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
newLeft = mouseX-oldX; newTop = mouseY-oldY;
if (bL!=null) newLeft = Math.max(newLeft,bL);
if (bR!=null) newLeft = Math.min(newLeft,bR);
if (bT!=null) newTop = Math.max(newTop ,bT);
if (bB!=null) newTop = Math.min(newTop ,bB);
LEFTRIGHT = newLeft-startL; UPDOWN = newTop-startT;
if (NS4) {left = newLeft; top = newTop;}
else if (NS6){style.left = newLeft; style.top = newTop;}
else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
if (dragJS) eval(dragJS);
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mouseup') {
document.onmousemove = null;
if (NS) document.releaseEvents(Event.MOUSEMOVE);
if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
if (document.curDrag) with (document.curDrag) {
if (typeof targL =='number' && typeof targT == 'number' &&
(Math.pow(targL-((NS4)?left:(NS6)?parseInt(style.left):style.pixelLeft),2)+
Math.pow(targT-((NS4)?top:(NS6)?parseInt(style.top):style.pixelTop),2))<=tol) {
if (NS4) {left = targL; top = targT;}
else if (NS6) {style.left = targL; style.top = targT;}
else {style.pixelLeft = targL; style.pixelTop = targT;}
SNAPPED = true; LEFTRIGHT = startL-targL; UPDOWN = startT-targT; }
if (everyTime || SNAPPED) eval(dropJS);
if(dropBack) {if (NS4) zIndex = oldZ; else style.zIndex = oldZ;}
retVal = false; if(!NS) event.returnValue = false; }
document.curDrag = null;
}
if (NS) document.routeEvent(objName);
} return retVal;
}
//-->
</script>
</head>
<body onLoad="dragLayer('MyDiv','',0,0,0,0,true,false,-1,-1,-1,-1,false,false,0,'',false,'')">
<div id="MyDiv" style="position:absolute; left:0px; top:0px; width:50px; height:50px; z-index:1; background-color: #FF00FF; layer-background-color: #FF00FF; border: 1px none #000000;"></div>
</body>
</html>
Ny bruger
Nybegynder
Opret
Preview
