JS怎么实现类似Excel左键拖拽功能

JS怎么实现类似Excel左键拖拽功能；例如：鼠标放在文本框上，文本框自动变成一个可拖动的标示，然后按住鼠标往下拖，拖到下面某个位置松开鼠标，即鼠标开始位置的文本框的值与鼠标结束文本框位置的值一样；各位高手都来写写吧~~~~高分送啊。跪求了。

解决方案 »

  1.   

    单纯的js完成很难。你得学会使用js类库信息，包括jquery等等工具。
    以前我在jquery中看到类似的，但是不完整。
    你可以查询些这些书籍
      

  2.   


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>无标题页</title>
        <style type="text/css">
            body{margin:0px;padding:0px;text-align:center;}
            #Text1{cursor:pointer;width:200px;border:1px solid #ccc;}
            #Text2{width:200px;border:1px solid #ccc;}
            #MASK{width:200px;border:1px dotted black;z-index:100; background:white;position:absolute;display:none;cursor:move;}
        </style>
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var move=false;
                $("#Text1").mousedown(function(e){
                    e=e||window.event;
                    var ol = $(this).offset().left;
                    var ot = $(this).offset().top;
                    var minw=e.pageX-ol;
                    var minh=e.pageY-ot;
                    $(this).blur();
                    $("#MASK").css({"top":ot,"left":ol,"display":"block"}).html($(this).val());
                    move=true;
                    $(document).mousemove(function(e){
                        if(move){
                            e=e||window.event;
                            var x = e.pageX;
                            var y = e.pageY;
                            $("#MASK").css({"top":y-minh,"left":x-minw});
                        }
                    }).mouseup(function(e){
                        e=e||window.event;
                        var t2left = $("#Text2").offset().left;
                        var t2top = $("#Text2").offset().top;
                        var t2width = $("#Text2").width();
                        var t2height = $("#Text2").height();
                        var maskleft = parseInt($("#MASK").css("left"));
                        var masktop = parseInt($("#MASK").css("top"));
                        if(Math.abs(t2left-maskleft)<=t2width/2&&Math.abs(masktop-t2top)<=t2height/2){
                            $("#Text2").val($("#MASK").html());
                            $("#Text1").val("");
                        }
                        move=false;
                        $("#MASK").css("display","none");
                    })
                })
            })
        </script>
    </head>
    <body>
        <div id="MASK"></div>
        <br />
        <input id="Text1" type="text" value="Text1" />
        <input id="Text2" type="text" />
    </body>
    </html>
      

  3.   

    http://www.cnblogs.com/zhuqil/archive/2010/01/13/1646413.html
      

  4.   

    http://www.cnblogs.com/ljchow/archive/2010/05/07/1729345.html