如何在web上点击住某个图时让他移动?

我今天面试时让我实现这样的功能:
1.在web上画一条线,在线上画几个图,鼠标点击任何一个图时能够拖动,并取出图在页面上的坐标?
2.在任何一个图上双击时,弹出一个新界面,在新界面上同样画一条线,在此线上打开刚双击的这个图,
  在图的后面放一个凸透镜,利用计算机照相技术原理,在直线上拖动这个图时.他自动按焦距大小将此图放大或者缩小并在凸透镜的后面显示此图像?着急等待?谢谢好心人!

解决方案 »

  1.   

    实现肯定只能通过JAVASCRIPT脚本来完成，在服务端完成不会很理想的，具体的实施可以结合CSS，凸透镜这块可以参考新浪的彩信DIY的脚本，他们的是选取筐，你可以根据实际需要更改
      

  2.   

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var currentMoveObj = null;    //当前拖动对象
    var relLeft;    //鼠标按下位置相对对象位置
    var relTop;
    function f_mdown(obj)
    {
        currentMoveObj = obj;        //当对象被按下时，记录该对象
        currentMoveObj.style.position = "absolute";
        relLeft = event.x - currentMoveObj.style.pixelLeft;
        relTop = event.y - currentMoveObj.style.pixelTop;
    }
    window.document.onmouseup = function()
    {
        currentMoveObj = null;    //当鼠标释放时同时释放拖动对象
    }
    function f_move(obj)
    {
        if(currentMoveObj != null)
        {
            currentMoveObj.style.pixelLeft=event.x-relLeft;
            currentMoveObj.style.pixelTop=event.y-relTop;
        }
    }//-->
    </SCRIPT>
    <BODY>
    <TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:50;top:50" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
    <TR>
        <TD bgcolor="#CCCCCC" align="center" style="cursor:move">title1</TD>
    </TR>
    <TR>
        <TD align="center" height="60">content</TD>
    </TR>
    </TABLE>
    <TABLE width="100" border=1 onselectstart="return false" style="position:absolute;left:350;top:250" onmousedown="f_mdown(this)" onmousemove="f_move(this)">
    <TR>
        <TD bgcolor="#CCCCCC" align="center" style="cursor:move">title2</TD>
    </TR>
    <TR>
        <TD align="center" height="60">content</TD>
    </TR>
    </TABLE>
    </BODY>
      

  3.   

    以下仅是一部分功能（沿直线拖动）：<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>显示拖动层例子</title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="软件兔,SoftBunny">
    <meta name="Keywords" content="层,拖动,DIV">
    <meta name="Description" content="简单实现层的拖动效果">
    </head><body><div id = "div1" style="position:absolute;z-index:1;width:148px;height=129px;background-color:#EEEEEE;border:1px solid black; left:90px; top:41px">
    <table border="1" width="100%" id="table1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolorlight="#808080" bordercolordark="#808080" height="100%">
    <tr>
    <td style="font-size:9pt;" bgcolor="#C0C0C0" height="19" id ="divTitle2" style="cursor:default;" width="94%">标题栏
    可拖动</td>
    <td onclick="div1.style.display='none'"  style="cursor:default" bgcolor="#808080" height="19" style="cursor:default;" width="5%" bordercolor="#000000">
    <font color="#FFFFFF" title="点击可关闭">×</font></td>
    </tr>
    <tr>
    <td align=center colspan="2">软件兔整理</td>
    </tr>
    </table>
    </div>
    <table border=0 id="divline" style="position:absolute;zindex:0;width:100%;height=1px;background-color:#CCCCCC;border:0px;top:105px;">
    <tr><td></td></tr>
    </table>
    <script language="javascript">
    <!--
    //父容器,即要移动的对象(此处需按实际情况改动)
    var divParent=window.div1;
    //标题栏,即点击可移动父对象的对象(此处需按实际情况改动)
    var divTitle=window.divTitle2;var mX,mY,oX,oY;
    divTitle.onmousedown=function(){
    mX = parseInt(event.x,10);
    mY = parseInt(event.y,10);
    oX = parseInt(divParent.style.left,10);
    oY = parseInt(divParent.style.top,10);divTitle.setCapture();
    divTitle.onmousemove=function(){
    divParent.style.left=oX + (parseInt(event.x,10) -mX);
    divParent.style.top=oY;
    //以下设置缩放//以上设置缩放}
    }
    divTitle.onmouseup = function(){
    divTitle.releaseCapture();
    divTitle.onmousemove=null;
    }
    //-->
    </script>
    </body></html>
    至于缩放，只是设置一下相应对象Style的width及height而已，不过我早就忘了凸透镜的成像公式了～，所以还是你自己按公式改一下吧。当然改完后还有一些细节需要完善（如果时间允许的话）
      

  4.   

    谢谢!凸透镜的成像公式好像是:1/f=1/v+1/a