Nån som har en bra DHTML kod till mig??

mha dreamweaver skapar man lätt såna här script. Problemet är bara att det blir ruskigt mkt kod eftersom funktionen även kan göra en hel mängd andra grejer.

Koden kommer här nedan och den funkar iaf både i ns och ie.
Lägga i head-taggen.

hmmm....nu letade det in sig en smiley i koden...den ska givetvis inte vara med....

<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v3.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v3.0
  //Copyright 1998 Macromedia, Inc. All rights reserved.
  var i,j,aLayer,retVal,curDrag=null,NS=(navigator.appName=='Netscape'), curLeft, curTop;
  if (!document.all && !document.layers) return false;
  retVal = true; if(!NS && event) event.returnValue = true;
  if (MM_dragLayer.arguments.length > 1) {
    curDrag = MM_findObj(objName); if (!curDrag) return false;
    if (!document.allLayers) { document.allLayers = new Array();
      with (document) if (NS) { 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 for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];}
    curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
    curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
    curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
    curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
    curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
    curDrag.MM_oldZ = (NS)?curDrag.zIndex:curDrag.style.zIndex;
    curLeft= (NS)?curDrag.left:curDrag.style.pixelLeft; curDrag.MM_startL = curLeft;
    curTop = (NS)?curDrag.top:curDrag.style.pixelTop; curDrag.MM_startT = curTop;
    curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop -cU;
    curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop +cD;
    curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
    document.onmousedown = MM_dragLayer; document.onmouseup = MM_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.MM_maxZ = 0;
      for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
        var aLayerZ = (NS)?aLayer.zIndex:aLayer.style.zIndex;
        if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
        var isVisible = (((NS)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
        if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
          var parentL=0; var parentT=0;
          if (!NS) { parentLayer = aLayer.parentElement;
            while (parentLayer != null && parentLayer.style.position) {
              parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
              parentLayer = parentLayer.parentElement; } }
          var tmpX=mouseX-(((NS)?pageX:style.pixelLeft+parentL)+MM_hLeft);
          var tmpY=mouseY-(((NS)?pageY:style.pixelTop +parentT)+MM_hTop);
          var tmpW = MM_hWidth;  if (tmpW <= 0) tmpW += ((NS)?clip.width :offsetWidth);
          var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS)?clip.height:offsetHeight);
          if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
              | | maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
      if (curDrag) {
        document.onmousemove = MM_dragLayer; if (NS) document.captureEvents(Event.MOUSEMOVE);
        curLeft = (NS)?curDrag.left:curDrag.style.pixelLeft;
        curTop = (NS)?curDrag.top:curDrag.style.pixelTop;
        MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
        document.MM_curDrag = curDrag;  curDrag.MM_SNAPPED=false;
        if(curDrag.MM_toFront) {
          eval('curDrag.'+((NS)?'':'style.')+'zIndex=document.MM_maxZ+1');
          if (!curDrag.MM_dropBack) document.MM_maxZ++; }
        retVal = false; if(!NS) event.returnValue = false;
    } } else if (theEvent == 'mousemove') {
      if (document.MM_curDrag) with (document.MM_curDrag) {
        var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
        var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
        newLeft = mouseX-MM_oldX; newTop  = mouseY-MM_oldY;
        if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
        if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
        if (MM_bT!=null) newTop  = Math.max(newTop ,MM_bT);
        if (MM_bB!=null) newTop  = Math.min(newTop ,MM_bB);
        MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
        if (NS) {left = newLeft; top = newTop;}
        else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
        if (MM_dragJS) eval(MM_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.MM_curDrag) with (document.MM_curDrag) {
        if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
            (Math.pow(MM_targL-((NS)?left:style.pixelLeft),2)+
             Math.pow(MM_targT-((NS)?top:style.pixelTop),2))<=MM_tol) {
          if (NS) {left = MM_targL; top = MM_targT;}
          else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
          MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
        if (MM_everyTime | | MM_SNAPPED) eval(MM_dropJS);
        if(MM_dropBack) {if (NS) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
        retVal = false; if(!NS) event.returnValue = false; }
      document.MM_curDrag = null;
    }
    if (NS) document.routeEvent(objName);
  } return retVal;
}
//-->
</script>

Lägga i body-taggen:

onLoad="MM_dragLayer('Layer1','',0,0,0,0,true,false,0,0,0,100,false,false,0,'',false,'')"

I detta exempel är det alltså "layer1" som ska dras. Du anger åt vilka håll du får dra lagret där det står "0,0,0,100" enligt : "upp, ned, vänster, höger".

Det är knappast det bästa alternativet då det är mkt kod....men det funkar!

------------------
Fredrik Klarqvist
fredrik.klarqvist@swipnet.se
www.streetwise.se/fredrik/

[Redigerat av fredrik den 17 aug 2000]

förklaring till hur man gör i dreamweaver: (efter önskemål från epost)
1. Dra upp ett lager och döp det till nåt lämpligt.
2. Avmarkera lagret och välja "Behaviors", klicka på "+"-knappen och välj "Dra skikt".
3. Välj ditt lager under "skikt" markera "begränsad" under "rörelse"
4. Klicka i uppåt: 0, nedåt: 0, vänster: 0, höger: 100.
5. Klart!

Så är det ngt förenklat, det finns en hel rad andra inställning aman kan göra med.

------------------
Fredrik Klarqvist
fredrik.klarqvist@swipnet.se
www.streetwise.se/fredrik/

Tack du hyggliga menniska!

------------------
¬ peterbe.com¬

Jag får inte ovanstående kod att fungera. Får bara JS-fel på rad 106; ett objekt förväntas.

<html>
<head>
<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v3.0
//Copyright 1998 Macromedia, Inc. All rights reserved.
var i,j,aLayer,retVal,curDrag=null,NS=(navigator.appName=='Netscape'), curLeft, curTop;
if (!document.all && !document.layers) return false;
retVal = true; if(!NS && event) event.returnValue = true;
if (MM_dragLayer.arguments.length > 1) {
curDrag = MM_findObj(objName); if (!curDrag) return false;
if (!document.allLayers) { document.allLayers = new Array();
with (document) if (NS) { 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 for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];}
curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
curDrag.MM_oldZ = (NS)?curDrag.zIndex:curDrag.style.zIndex;
curLeft= (NS)?curDrag.left:curDrag.style.pixelLeft; curDrag.MM_startL = curLeft;
curTop = (NS)?curDrag.top:curDrag.style.pixelTop; curDrag.MM_startT = curTop;
curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop -cU;
curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop +cD;
curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
if (NS) document.captureEvents(Event.MOUSEDOWN&#0124;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.MM_maxZ = 0;
for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
var aLayerZ = (NS)?aLayer.zIndex:aLayer.style.zIndex;
if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
var isVisible = (((NS)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
var parentL=0; var parentT=0;
if (!NS) { parentLayer = aLayer.parentElement;
while (parentLayer != null && parentLayer.style.position) {
parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
parentLayer = parentLayer.parentElement; } }
var tmpX=mouseX-(((NS)?pageX:style.pixelLeft+parentL)+MM_hLeft);
var tmpY=mouseY-(((NS)?pageY:style.pixelTop +parentT)+MM_hTop);
var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += ((NS)?clip.width:offsetWidth);
var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS)?clip.height:offsetHeight);
if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
&#0124; &#0124; maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
if (curDrag) {
document.onmousemove = MM_dragLayer; if (NS) document.captureEvents(Event.MOUSEMOVE);
curLeft = (NS)?curDrag.left:curDrag.style.pixelLeft;
curTop = (NS)?curDrag.top:curDrag.style.pixelTop;
MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false;
if(curDrag.MM_toFront) {
eval('curDrag.'+((NS)?'':'style.')+'zIndex=document.MM_maxZ+1');
if (!curDrag.MM_dropBack) document.MM_maxZ++; }
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mousemove') {
if (document.MM_curDrag) with (document.MM_curDrag) {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
newLeft = mouseX-MM_oldX; newTop = mouseY-MM_oldY;
if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
if (MM_bT!=null) newTop = Math.max(newTop ,MM_bT);
if (MM_bB!=null) newTop = Math.min(newTop ,MM_bB);
MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
if (NS) {left = newLeft; top = newTop;}
else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
if (MM_dragJS) eval(MM_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.MM_curDrag) with (document.MM_curDrag) {
if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
(Math.pow(MM_targL-((NS)?left:style.pixelLeft),2)+
Math.pow(MM_targT-((NS)?top:style.pixelTop),2))<=MM_tol) {
if (NS) {left = MM_targL; top = MM_targT;}
else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
if (MM_everyTime &#0124; &#0124; MM_SNAPPED) eval(MM_dropJS);
if(MM_dropBack) {if (NS) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
retVal = false; if(!NS) event.returnValue = false; }
document.MM_curDrag = null;
}
if (NS) document.routeEvent(objName);
} return retVal;
}
//-->
</script>

</head>

<body onLoad="MM_dragLayer('Layer1','',0,0,0,0,true,false,0,0,0,100,false,false,0,'',false,'')">

<div id="Layer1" style="position:absolute; left:100; top:100; width:30; heigth:30">hej</div>

</body>
</html>

:q

------------------
F R E D R I K S S O N

Är det verkligen ingen som fattar vad jag gjort för fel? :q

------------------
F R E D R I K S S O N

Om jag förstått det rätt, vill du kunna flytta ett lager.

Den kod som visats ovan är alldeles för gryllig för min smak, så pröva om du kan använda detta istället:

<html>
<head>
<script type="text/javascript" language="JavaScript">

act = 0
move = 0
clickleft = 0
clicktop = 0
zi = 1

if(document.layers) document.captureEvents(Event.MOUSEDOWN &#0124; Event.MOUSEMOVE &#0124; Event.MOUSEUP);
document.onmousedown= mouseDown; document.onmousemove= mouseMove; document.onmouseup= mouseUp

function mouseDown(e) {
 if(act){
if(document.all){lagret=document.all(theLayer);}
else if(document.layers){lagret=document.layers[theLayer];}
else if(document.getElementById){lagret=document.getElementById(theLayer);}

 if(document.all){clickleft= event.x-parseInt(lagret.style.left); clicktop= event.y-parseInt(lagret.style.top); lagret.style.zIndex = zi++;}
 else if(document.layers){clickleft= e.pageX-lagret.left; clicktop= e.pageY-lagret.top; lagret.zIndex = zi++;}
 else if(document.getElementById){clickleft= e.pageX-parseInt(lagret.style.left); clicktop= e.pageY-parseInt(lagret.style.top); lagret.style.zIndex = zi++;}
    move = 1
  }
}

function mouseMove(e) {

if(move){

if(document.layers){
if(e.pageX<(window.innerWidth-clickleft)&&e.pageX>clickleft){lagret.left=e.pageX-clickleft;}
if(e.pageY<(window.innerHeight-clicktop)&&e.pageY>clicktop){lagret.top=e.pageY-clicktop;}
}

else if(document.all){
if(event.x<(document.body.clientWidth-clickleft)&&event.x>clickleft){lagret.style.left=event.x-clickleft;}
if(event.y<(document.body.clientHeight-clicktop)&&event.y>clicktop){lagret.style.top=event.y-clicktop;}
  }

else if(document.getElementById){
if(e.pageX<(window.innerWidth-clickleft)&&e.pageX>clickleft){lagret.style.left=e.pageX-clickleft;}
if(e.pageY<(window.innerHeight-clicktop)&&e.pageY>clicktop){lagret.style.top=e.pageY-clicktop;}
  }
}
}

function mouseUp(){move = 0}

</script>

<head>
<body>

<div id="lager1" onmouseover="theLayer='lager1'; act=1;" onMouseOut="act=0" style="position: absolute; left:10; top:10;">
<layer onmouseover="theLayer='lager1'; act=1;" onMouseOut="act=0">

Ett litet lager... Flytta mig!

</layer>
</div>

</body>
</html>

Funkar i IE4+ NN4+ & NS6.

------------------
- J-O-H-N-S-E-N -
------------------

Tackar!

------------------
F R E D R I K S S O N