JS 怎样用鼠标控制控件的大小位置

我在页面上用JS生成一个控件，然后要求可以用鼠标拖动和调整控件的位置大小....要怎么实现啊

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html dir="ltr" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../css/style.css" type="text/css">
    <title>YIDATEC</title>

    <SCRIPT language=JavaScript type=text/JavaScript> function img_zoom(e, o) 
    {
      var zoom = parseInt(o.style.zoom, 10) || 100;
      zoom += event.wheelDelta / 12;
      if (zoom > 0) o.style.zoom = zoom + '%';
      
      return false; 
    }

    function resizepic(o){
    o.style.zoom='20%';
    return true;
    }

    var offsetX;
    var offsetY;
    var draged = false;
    var selectObj;
    var xhid = 20;
    var yhid = 25;
    function down(){
    selectObj = window.event.srcElement;
    selectObj.setCapture();
    offsetX = window.event.clientX - document.body.scrollLeft;
    offsetY = window.event.clientY - document.body.scrollTop;
       
    draged = true;
    }

    function move(){
       if (draged){
        var xLeftLength = window.event.clientX - offsetX + xhid;
        var yLeftLength = window.event.clientY - offsetY + yhid;
       
        if (xLeftLength < 20) {
        selectObj.style.pixelLeft = xLeftLength;
    document.getElementsByName("Xhid")[0].value = xLeftLength;
        }
       
        if (yLeftLength < 25) {
    selectObj.style.pixelTop = yLeftLength;
    document.getElementsByName("Yhid")[0].value = yLeftLength;
        }
    }
    }

    function up() {
    selectObj.releaseCapture();

    draged = false;

    if (document.getElementsByName("Xhid")[0].value != "") {
    xhid = parseInt(document.getElementsByName("Xhid")[0].value);
    }
    if (document.getElementsByName("Yhid")[0].value != "") {
    yhid = parseInt(document.getElementsByName("Yhid")[0].value);
    }
    }

    function mouseout() {
    if (selectObj) {
    selectObj.releaseCapture();
    }

    draged = false;

    if (document.getElementsByName("Xhid")[0].value != "") {
    xhid = parseInt(document.getElementsByName("Xhid")[0].value);
    }
    if (document.getElementsByName("Yhid")[0].value != "") {
    yhid = parseInt(document.getElementsByName("Yhid")[0].value);
    }
    }
        </SCRIPT>
        </head>
    <center>
    <body>
    <!-- Footer Divs -->
    <table> 
     <tr>
       <td class="body" align="center" >
    <input type="hidden" name="Xhid">
       </td>
      </tr>
      <tr>
       <td class="body" align="center" >
    <input type="hidden" name="Yhid">
       </td>
      </tr>
      <tr>
    </table>
    <div style="cursor:mouse;overflow:hidden" class="topMargin" onmouseup="up()" onmousemove="move()" onmousedown="down()" onmouseout="mouseout()">
    <table width="100%" border="0" cellpadding="0" cellspacing="0" >
    <tbody>
      <tr>
    <td class="body" align="left" valign="top">
    <img id="image" border="0" src="../image/land.jpg" onload="resizepic(this)" onmousewheel="return img_zoom(event,this)" style="position:absolute"/>          </map> 
    </td>
      </tr>
    </tbody>
    </table>
    </div>
    </body>
    </center>
    </html>