求救,高分求 可以拽div边界大小的代码。

呵呵，给一点思路你看看如何：<div style="width:100px;height:150px" contenteditable>可以进行编辑的DIV</div>

解决方案 »

  1.   

    <html><head>
      <title>div test</title>
    <script language="javascript">
    var mouseX = 0;function divonmousemove(obj)
    {
    if (Math.abs(obj.offsetLeft+obj.offsetWidth-event.x)<8)
         obj.style.cursor='e-resize';
        else
         obj.style.cursor='';
        if (event.button==1)
        {
            obj.style.width = parseInt(obj.offsetWidth) + (event.x - mouseX);
        }
    }function divonmousedown(obj)
    {
    mouseX = event.x;
    }function divonmouseup(obj)
    {
    mouseX = 0;
    }
    </script>
    </head><body><div onmousemove="divonmousemove(this);" onmouseleave="this.style.cursor='';"
    onmousedown="divonmousedown(this);" onmouseup="divonmouseup(this);"
     style="width:300;background:green">
    aaaaa
    <div></body></html>
      

  2.   

    漏了一句，用这个：
    <html><head>
      <title>div test</title>
    <script language="javascript">
    var mouseX = 0;function divonmousemove(obj)
    {
    if (Math.abs(obj.offsetLeft+obj.offsetWidth-event.x)<4)
         obj.style.cursor='e-resize';
        else
         obj.style.cursor='';
        if (event.button==1)
        {
            obj.style.width = parseInt(obj.offsetWidth) + (event.x - mouseX);
    mouseX = event.x;
        }
    }function divonmousedown(obj)
    {
    mouseX = event.x;
    }function divonmouseup(obj)
    {
    mouseX = 0;
    }
    </script>
    </head><body><div onmousemove="divonmousemove(this);" onmouseleave="this.style.cursor='';"
    onmousedown="divonmousedown(this);" onmouseup="divonmouseup(this);"
     style="width:300;background:green">
    aaaaa
    <div></body></html>
      

  3.   

    嗯，一个不错的练习题，大家都来练练。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> resize div </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="emu">
    <META NAME="Keywords" CONTENT="resize div">
    <META NAME="Description" CONTENT="emu's test of resize div">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var startx=0;
    var starty=0;
    var mousePress=false;
    var destElm;
    var oldWidth=300;
    var oldHeight=200;
    var dir1=false;
    var dir2=false;
    function down(){
    startx = event.x;
    starty = event.y;
    mousePress=true;
    destElm=event.srcElement
    oldWidth = destElm.offsetWidth;
    oldHeight = destElm.offsetHeight;
    dir1=(startx>destElm.firstChild.offsetWidth);
    dir2=(starty>destElm.firstChild.offsetHeight);
    }
    function up(){
    mousePress=false;
    }
    function move(){
    if (!mousePress) return;
    var d=event.x-startx+oldWidth;
    if (d>0 && dir1) destElm.style.width=d;
    var d=event.y-starty+oldHeight;
    if (d>0 && dir2) destElm.style.height=d;
    }
    //-->
    </SCRIPT></HEAD><BODY onmousemove="move()" onmouseup="up()">
    <div style="width:300px;height=200px;background=white;cursor:hand;" onmousedown="down()" >
    <div style="width:99%;height=99%;background=yellow;cursor:default">
    </div>
    </div>
    </BODY>
    </HTML>
      

  4.   

    忘了高度了，再来：
    <html>
    <head>
      <title>div test</title>
    <script language="javascript">
    var mouseX = 0;
    var mouseY = 0;function divonmousemove(obj)
    {
    if ((Math.abs(obj.offsetLeft+obj.offsetWidth-event.x)<4) && (Math.abs(obj.offsetTop+obj.offsetHeight-event.y)<4))
            obj.style.cursor='se-resize';
        else if (Math.abs(obj.offsetLeft+obj.offsetWidth-event.x)<4) obj.style.cursor='e-resize';
        else if (Math.abs(obj.offsetTop+obj.offsetHeight-event.y)<4) obj.style.cursor='s-resize';
        else
         obj.style.cursor='';
        if (event.button==1)
        {
            obj.style.width = parseInt(obj.offsetWidth) + (event.x - mouseX);
    mouseX = event.x;
            obj.style.height = parseInt(obj.offsetHeight) + (event.y - mouseY);
    mouseY = event.y;
        }
    }function divonmousedown(obj)
    {
    mouseX = event.x;
        mouseY = event.y;
    }function divonmouseup(obj)
    {
    mouseX = 0;
        mouseY = 0;
    }
    </script>
    </head>
    <body>
    <div onmousemove="divonmousemove(this);" onmouseleave="this.style.cursor='';"
    onmousedown="divonmousedown(this);" onmouseup="divonmouseup(this);"
     style="width:300;height:200;background:green" title="按下鼠标拖动大小">
    按下鼠标拖动大小
    <div>
    </body>
    </html>
      

  5.   

    emu(ston) 的方法不够通用,离开IE就不能用了
    nhconch(海风轻拂)的方法有个大漏洞，move的时候没有判断是不是在拖动，在Opera下面就不行了。而且拖动的时候要小心翼翼的。呵呵
      

  6.   

    呵呵，考我来着？
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> resize div </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="emu">
    <META NAME="Keywords" CONTENT="resize div">
    <META NAME="Description" CONTENT="emu's test of resize div">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var startx=0;
    var starty=0;
    var mousePress=false;
    var destElm;
    var oldWidth=300;
    var oldHeight=200;
    var dir1=false;
    var dir2=false;
    function down(e){
    destElm=document.all?e.srcElement:e.target;
    if (!destElm.firstChild) {
    destElm=null;
    return;
    }
    startx = e.clientX;
    starty = e.clientY;
    mousePress=true;
    oldWidth = destElm.offsetWidth;
    oldHeight = destElm.offsetHeight;
    dir1=(startx>destElm.firstChild.offsetWidth);
    dir2=(starty>destElm.firstChild.offsetHeight);
    }
    function up(e){
    mousePress=false;
    destElm=null;
    }
    function move(e){
    if (!mousePress) return;
    var d=e.clientX-startx+oldWidth;
    if (d>3 && dir1) {
    destElm.style.width=d;
    destElm.firstChild.style.width=d-3;
    if (destElm.offsetWidth<=destElm.firstChild.offsetWidth+2)
    destElm.style.width = destElm.offsetWidth+3; }
    var d=e.clientY-starty+oldHeight;
    if (d>3 && dir2) {
    destElm.style.height=d;
    destElm.firstChild.style.height=d-3;
    if (destElm.offsetHeight<=destElm.firstChild.offsetHeight+2)
    destElm.style.height = destElm.offsetHeight+3;
    }
    }
    //-->
    </SCRIPT></HEAD><BODY onmousemove="move(event)" onmouseup="up(event)">
    <div style="width:303px;height:203px;background-color:#CCFF66;cursor:hand" onmousedown="down(event)"><div style="width:300px;height:200px;background-color:yellow;cursor:default;overflow:hidden">test
    </div>
    </div>
    </BODY>
    </HTML>IE5,NS6，MOZ1.3通过。
      

  7.   

    很不错了，
    但能不能再做活点，
    onmousemove="move(event)" onmouseup="up(event)"
    均是对body来说的，我body的这些事件另有他用如果这些事件能attach到div就好了.
      

  8.   

    <div contenteditable><img border=0 src=http://expert.csdn.net/images/csdn.gif></div>
      

  9.   

    用contenteditable，我怎么选中div中的东西？
      

  10.   

    nhconch(海风轻拂)的div好象只能变小.
      

  11.   

    to emu(ston);
       你的代码我在ns4.78上试，没反应吗！
      

  12.   

    momoco() 没装那个版本，试不了。不过一开始也没想着兼容到它的，毕竟都多少年前的版本了。