Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    859
    Thanks
    50
    Thanked 6 Times in 5 Posts

    crossbrowser moving layers around a page

    Usually I can find what I need by doing a Googlesearch.

    This time, I can't seem to find anything.

    I need a crossbrowser method for moving layers around the screen. So simple an idea!

    If it helps answer my query, here is the js for what I have already (a sort of horrible mess that works in IE):

    PS - I can live with a jquery solution!

    Code:
    <!--
    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;
    }
    //-->
    Last edited by tpeck; 01-09-2012 at 06:51 AM.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    859
    Thanks
    50
    Thanked 6 Times in 5 Posts
    I found the answer with jquery here: http://jqueryui.com/demos/draggable/

    Code:
    <!doctype html>
    <html>
    
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script src="ui.core.js" type="text/javascript"></script>
    <script src="ui.draggable.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
    $("#draggable").draggable();
    });
    </script>
    <style>
    .content{
    font-family: Arial;
    font-weight: bold;
    font-size: 13px;
    color: #000000;
    padding: 2px;
    }
    </style>
    </head>
    
    <body>
    <div id="draggable" class="content" style="position:absolute; left:15px; top:100px; width:120; height:20; z-index:1; background-color: #FFFFFF; layer-background-color: #CCCCCC; border: 1px none #000000">
    <center>Drag me around</center>
    </div>
    </body>
    
    </html>
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •