求：鼠标拖拽改变div尺寸的代码，要兼容各种浏览器

http://www.google.com/calendar/render?pli=1

解决方案 »

  1.   

    楼上提供的链接是什么意思呀？对我对问题没有什么帮助啊。还有谁来出出主意？“鼠标拖拽改变div尺寸的代码，要兼容各种浏览器”
      

  2.   


    csdn 的简历确实如此，但不知还有什么其它的，多一些参考更好？
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title> - http://www.never-online.net </title>
        <meta http-equiv="ImageToolbar" content="no" />
        <meta name="author" content="never-online, BlueDestiny"/>
        <meta name="keywords" content="never modules, Mozilla CSS, C#, .net, Reference, BlueDestiny, never-online"/>
        <meta name="description" content="javascript reference, c sharp artilces"/>
        <meta name="creator.name" content="never-online, BlueDestiny" />
        <style type="text/css" media="all" title="Default">
          * { font-size:10pt; font-family:Arial; }
          #myDiv { background-color:appworkspace; width:200px; height:100px; color:#fff; text-align:center; }
        </style>
      </head>  <body id="www.never-online.net">
        <div align="center"><div id="myDiv">Easy to write the dray code, <br/>this is a simple demo, <br/>by never-online,<br/> http://www.never-online.net</div></div>
        <script type="text/javascript">
        //<![CDATA[
          var getAbsolute = function (e) {
            var width = e.offsetWidth;
            var height = e.offsetHeight;
            var left = e.offsetLeft;
            var top = e.offsetTop;
            while (e=e.offsetParent) {
              left += e.offsetLeft;
              top  += e.offsetTop;
            }
            var right = left+width;
            var bottom = top+height;
            return {
              'width': width,
              'height': height,
              'left': left,
              'top': top,
              'right': right,
              'bottom': bottom
            }
          };      /* Kernel code, drag div change the coords */
    /* by never-online, http://www.never-online.net */      var wrapId = "myDiv"; var wrap = document.getElementById(wrapId); 
          wrap.onmouseover = function () {
            wrap.style.cursor = "se-resize";
            document.onmousedown = function (evt) {
    /* save the original coordinates */
              evt = window.event||evt; var a=getAbsolute(wrap);
              wrap.cx=evt.clientX-a.width; wrap.cy=evt.clientY-a.height;
              document.onmousemove = function (evt) {
    /* change the coords when mouse is moveing */
                evt = window.event||evt; try {
                wrap.style.width = (evt.clientX-wrap.cx)+"px";
                wrap.style.height = (evt.clientY-wrap.cy)+"px";
                } catch (ex) {};
              };
              document.onmouseup = function () {
    /* drag end release the event */
                document.onmousemove = null;
                document.onmouseup = null;
                wrap.style.cursor="default";
              };
            };
          }    //]]>
        </script>
      </body>
    </html>
      

  4.   

    这样美观一些。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title> - http://www.never-online.net </title>
        <meta http-equiv="ImageToolbar" content="no" />
        <meta name="author" content="never-online, BlueDestiny"/>
        <meta name="keywords" content="never modules, Mozilla CSS, C#, .net, Reference, BlueDestiny, never-online"/>
        <meta name="description" content="javascript reference, c sharp artilces"/>
        <meta name="creator.name" content="never-online, BlueDestiny" />
        <style type="text/css" media="all" title="Default">
          * { font-size:10pt; font-family:Arial; }
          #myDiv { background-color:appworkspace; width:200px; height:100px; color:#fff; text-align:center; }
        </style>
      </head>  <body id="www.never-online.net">
        <div id="myDiv">Easy to write the dray code, <br/>this is a simple demo, <br/>by never-online,<br/> http://www.never-online.net</div>
        <script type="text/javascript">
        //<![CDATA[
          var getAbsolute = function (e) {
            var width = e.offsetWidth;
            var height = e.offsetHeight;
            var left = e.offsetLeft;
            var top = e.offsetTop;
            while (e=e.offsetParent) {
              left += e.offsetLeft;
              top  += e.offsetTop;
            }
            var right = left+width;
            var bottom = top+height;
            return {
              'width': width,
              'height': height,
              'left': left,
              'top': top,
              'right': right,
              'bottom': bottom
            }
          };      /* Kernel code, drag div change the coords */
          /* by never-online, http://www.never-online.net */      var wrapId = "myDiv"; var wrap = document.getElementById(wrapId); 
          wrap.onmouseover = function () {
            wrap.style.cursor = "se-resize";
            document.onmousedown = function (evt) {
              /* save the original coordinates */
              evt = window.event||evt; var a=getAbsolute(wrap);
              wrap.cx=evt.clientX-a.width; wrap.cy=evt.clientY-a.height;
              document.onmousemove = function (evt) {
                /* change the coords when mouse is moveing */
                evt = window.event||evt; try {
                wrap.style.width = (evt.clientX-wrap.cx)+"px";
                wrap.style.height = (evt.clientY-wrap.cy)+"px";
                } catch (ex) {};
              };
              document.onmouseup = function () {
                /* drag end release the event */
                document.onmousedown = null;
                document.onmousemove = null;
                document.onmouseup = null;
                wrap.style.cursor="default";
              };
            };
          }    //]]>
        </script>
      </body>
    </html>