？？？如何制作一个既可以移动，又可以改变大小的层？主要是鼠标的样式：(十字箭头)(双向箭头(水平、竖直、斜向))

一个层应该可以吧?
里面一个3 x 3表格,最中间的是内容,四个角放四个图片表示缩放,四个边表示左右上下拉申,鼠标在这八个位置(当然可以少做一点)按下,鼠标和做上角的x,y距离差就是层的宽,高。肯定不会翻转。

解决方案 »

  1.   

    可以考虑用activex控件实现
    楼上的方法也不错
      

  2.   

    http://jkisjk.vip.sina.com/html/MoveTableWithMouse.htm
      

  3.   

    以下一个例子:<HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD><BODY><TABLE ID="floater" border=1 style="left: 190px; top: 158px;position: absolute;width: 325;visibility: visible;z-index: 10;">
    <TR id="mymovetr" style="cursor:move;" bgcolor="blue">
    　　<TD><img src="img04.gif" onclick="floater.style.display='none';" style="cursor:hand">拖动行</TD>
    </TR>
    <TR>
    　　<TD>网页特效代码由[中国WEB开发者网络</TD>
    </TR>
    <TR>
    　　<TD>网页特效代码由[中国WEB开发者网络</TD>
    </TR>
    <TR>
    　　<TD>网页特效代码由[中国WEB开发者网络</TD>
    </TR>
    <TR>
    　　<TD><input name=text value="网页特效代码由[中国WEB开发者网络"></TD>
    </TR>
    </TABLE><script LANGUAGE="JavaScript">
    //提供移动处的ID必须为mymovetr
    //要移动的整个物体ID必须为floater
    self.onError=null;
    currentX = currentY = 0;
    whichIt = null;
    lastScrollX = 0; 
    lastScrollY = 0;
    NS = (document.layers) ? 1 : 0;
    IE = (document.all) ? 1: 0;
    function heartBeat() 
    {
    　　if(IE) 
    　　{ 
    　　　　diffY = document.body.scrollTop; diffX = document.body.scrollLeft;
    　　}　　if(NS) 
    　　{ 
    　　　　diffY = self.pageYOffset; diffX = self.pageXOffset; 
    　　}　　if(diffY != lastScrollY) 
    　　{
    　　　　percent = .1 * (diffY - lastScrollY);　　　　if(percent > 0) 
    　　　　　　percent = Math.ceil(percent);
    　　　　else 
    　　　　　　percent = Math.floor(percent);　　　　if(IE) 
    　　　　　　document.all.floater.style.pixelTop += percent;
    　　　　if(NS) 
    　　　　　　document.floater.top += percent; 　　　　lastScrollY = lastScrollY + percent;
    　　}　　if(diffX != lastScrollX) 
    　　{
    　　　　percent = .1 * (diffX - lastScrollX);　　　　if(percent > 0) 
    　　　　　　percent = Math.ceil(percent);
    　　　　else 
    　　　　　　percent = Math.floor(percent);　　　　if(IE) 
    　　　　　　document.all.floater.style.pixelLeft += percent;
    　　　　if(NS) 
    　　　　　　document.floater.left += percent;　　　　lastScrollX = lastScrollX + percent;
    　　}
    }
    function checkFocus(x,y) 
    { 
    　　stalkerx = document.floater.pageX;
    　　stalkery = document.floater.pageY;
    　　stalkerwidth = document.floater.clip.width;
    　　stalkerheight = document.floater.clip.height;　　if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) 
    　　　　return true;
    　　else 
    　　　　return false;
    }
    function grabIt(e) 
    {
    　　if(IE) 
    　　{
    　　　　whichIt = event.srcElement;
    　　　　//先检测是否处理在拖动行上，如果不是则不予拖动
    　　　　while (whichIt.id.indexOf("mymovetr") == -1) 
    　　　　{
    　　　　　　whichIt = whichIt.parentElement;
    　　　　　　if (whichIt == null) 
    　　　　　　{ 
    　　　　　　　　return true; 
    　　　　　　}
    　　　　}
    　　　　　　
    　　　　//再检测此行所在的上一级是否要移动的ID，如果是则拖动，不是仍不拖动
    　　　　while (whichIt.id.indexOf("floater") == -1) 
    　　　　{
    　　　　　　whichIt = whichIt.parentElement;
    　　　　　　if (whichIt == null) 
    　　　　　　{ 
    　　　　　　　　return true; 
    　　　　　　}
    　　　　}
    　　　　　　
    　　　　//开始拖动过程
    　　　　whichIt.style.pixelLeft = whichIt.offsetLeft;
    　　　　whichIt.style.pixelTop = whichIt.offsetTop;
    　　　　currentX = (event.clientX + document.body.scrollLeft);
    　　　　currentY = (event.clientY + document.body.scrollTop); 
    　　} 
    　　else 
    　　{ 
    　　　　window.captureEvents(Event.MOUSEMOVE);
    　　　　if(checkFocus (e.pageX,e.pageY)) 
    　　　　{ 
    　　　　　　whichIt = document.floater;
    　　　　　　StalkerTouchedX = e.pageX-document.floater.pageX;
    　　　　　　StalkerTouchedY = e.pageY-document.floater.pageY;
    　　　　} 
    　　}　　return true;
    }
    function moveIt(e) 
    {
    　　if (whichIt == null) 
    　　{ 
    　　　　return true;
    　　}　　if(IE) 
    　　{
    　　　　newX = (event.clientX + document.body.scrollLeft);
    　　　　newY = (event.clientY + document.body.scrollTop);
    　　　　distanceX = (newX - currentX); distanceY = (newY - currentY);
    　　　　currentX = newX; currentY = newY;
    　　　　whichIt.style.pixelLeft += distanceX;
    　　　　whichIt.style.pixelTop += distanceY;　　　　if(whichIt.style.pixelTop < document.body.scrollTop) 
    　　　　　　whichIt.style.pixelTop = document.body.scrollTop;　　　　if(whichIt.style.pixelLeft < document.body.scrollLeft) 
    　　　　　　whichIt.style.pixelLeft = document.body.scrollLeft;　　　　if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) 
    　　　　　　whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;　　　　if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) 
    　　　　　　whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;　　　　event.returnValue = false;
    　　} 
    　　else 
    　　{ 
    　　　　whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);　　　　if(whichIt.left < 0+self.pageXOffset) 
    　　　　　　whichIt.left = 0+self.pageXOffset;　　　　if(whichIt.top < 0+self.pageYOffset) 
    　　　　　　whichIt.top = 0+self.pageYOffset;　　　　if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) 
    　　　　　　whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;　　　　if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) 
    　　　　　　whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;　　　　return false;
    　　}　　return false;
    }
    function dropIt() 
    {
    　　whichIt = null;
    　　if(NS) 
    　　　　window.releaseEvents (Event.MOUSEMOVE);
    　　return true;
    }
    if(NS) 
    {
    　　window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
    　　window.onmousedown = grabIt;
    　　window.onmousemove = moveIt;
    　　window.onmouseup = dropIt;
    }
    if(IE)
    {
    　　document.onmousedown = grabIt;
    　　document.onmousemove = moveIt;
    　　document.onmouseup = dropIt;
    }
    if(NS || IE) 
    　　action = window.setInterval("heartBeat()",1);</script>
    </BODY>
    </HTML>
      

  4.   

    老大，分可不能少啊
    !
    任意缩放、拖曳的层
    <html> <body>
    <SCRIPT>
    document.execCommand("2D-position",false,true);
    </SCRIPT>
    <DIV CONTENTEDITABLE="true"><DIV style="width:300px;height:100px; color:white; background-color:red; 
    position:absolute;">My DIV</DIV></DIV>
    <p>
    <span CONTENTEDITABLE="true"><span style="width:300px;height:100px; color:white; background-color:blue; 
    position:absolute;">My Span</span></span>
    </body> </html>
    -----------------------
    2.<HTML>
    <SCRIPT>
    document.execCommand("2D-position",false,true);
    function fnHandleMoveStart() {
      var oDiv = event.srcElement
      oDiv.style.backgroundColor = "green";
      oDiv.innerText = "移动状态";
    }
    function fnHandleMoveEnd() {
      var oDiv = event.srcElement
      oDiv.style.backgroundColor = "red";
      oDiv.innerText = "停止状态";
    }
    </SCRIPT>
    <BODY onmovestart="fnHandleMoveStart();" onmoveend="fnHandleMoveEnd();">
    <DIV CONTENTEDITABLE="true">
    <DIV style="width:300px;height:100px; color:white; background-color:red; 
    position:absolute;">
    任意缩放、拖曳的层</DIV>
    </DIV>
    </BODY>
    </HTML>
    ---------------------------------
    3.
    <html> <body>
    <SCRIPT>
    document.execCommand("2D-position",false,true);
    </SCRIPT>
    <DIV CONTENTEDITABLE="true"><DIV style="width:300px;height:100px; color:white; background-color:red; 
    position:absolute;">My DIV</DIV></DIV>
    <p>
    <span CONTENTEDITABLE="true"><span style="width:300px;height:100px; color:white; background-color:blue; 
    position:absolute;">My Span</span></span>
    </body> </html>------------
      

  5.   

    上面是三个例子！！！
    再补上一个吧~~
    反正家底都漏了。做做好人~嘿嘿`~
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);function MM_findObj(n, d) { //v4.01
      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);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v4.01
      //Copyright 1998 Macromedia, Inc. All rights reserved.
      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 (MM_dragLayer.arguments.length > 1) {
        curDrag = MM_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.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 = (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.MM_startL = curLeft;
        curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop; 
        if (String(curTop)=="NaN") curTop=0; 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 = (NS4)?aLayer.zIndex:parseInt(aLayer.style.zIndex);
            if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
            var isVisible = (((NS4)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
            if (aLayer.MM_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);
    下接
      

  6.   

    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)+MM_hLeft);
              var tmpY=mouseY-(((NS4)?pageY:((NS6)?parseInt(style.top):style.pixelTop) +parentT)+MM_hTop);
              if (String(tmpX)=="NaN") tmpX=0; if (String(tmpY)=="NaN") tmpY=0;
              var tmpW = MM_hWidth;  if (tmpW <= 0) tmpW += ((NS4)?clip.width :offsetWidth);
              var tmpH = MM_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 = MM_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;
            MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
            document.MM_curDrag = curDrag;  curDrag.MM_SNAPPED=false;
            if(curDrag.MM_toFront) {
              eval('curDrag.'+((NS4)?'':'style.')+'zIndex=document.MM_maxZ+1');
              if (!curDrag.MM_dropBack) document.MM_maxZ++; }
            retVal = false; if(!NS4&&!NS6) 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 (NS4) {left = newLeft; top = newTop;}
            else if (NS6){style.left = newLeft; style.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-((NS4)?left:(NS6)?parseInt(style.left):style.pixelLeft),2)+
                 Math.pow(MM_targT-((NS4)?top:(NS6)?parseInt(style.top):style.pixelTop),2))<=MM_tol) {
              if (NS4) {left = MM_targL; top = MM_targT;}
              else if (NS6) {style.left = MM_targL; style.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 (NS4) 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>
    <div id="Layer1" style="position:absolute; left:20px; top:50px; width:90px; height:80px; z-index:1; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;" onClick="MM_dragLayer('Layer1','',1,1,90,20,true,false,-1,-1,-1,-1,20,50,500,'',false,'window.stat=\"test\";')"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#00CCCC">层1</td>
        </tr>
      </table>
    </div>
    <div id="Layer2" style="position:absolute; left:138px; top:48px; width:88px; height:83px; z-index:2; background-color: #0000FF; layer-background-color: #0000FF; border: 1px none #000000;" onClick="MM_dragLayer('Layer2','',0,0,0,0,true,false,-1,-1,-1,-1,false,false,0,'',false,'')">
      <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CC9900">
        <tr>
          <td>层2</td>
        </tr>
      </table>
    </div>
    <table width="300" height="200" border="1" cellpadding="1" cellspacing="1">
      <tr>
        <td> </td>
      </tr>
    </table>
    </body>
    </html>
    层2可以拖动的,老大，别把层给拖出来了。慢点啊
      

  7.   

    机器坏了几天，不好意思document.execCommand("2D-position",false,true);上面的那个怎么能让层本身不被编辑呢？只能变化边框。