日期:2014-05-16  浏览次数:20516 次

实现一个页面的多个文本框拖拽互换位置效果
就是一个页面假如有两个文本框A和B
现在我想要拖拽A到B的位置
然后松开鼠标 实现A到B的位置B到A的位置(位置互换)
我想要这种效果 有没有牛人给个效果的例子或者部分代码给我参考参考呢?
谢谢大家了

------解决方案--------------------
JScript code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript">
    var pos;                                
    var tag = 0;
    var dom;
    var rec;
    $(function()    {
        $("div").mousedown(function()    {
                                        dom = $(this);
                                        rec = $(this).offset();
                                        tag = 1;
                                    });
        $("div").mouseup(function()    {
                                          dom = $(this);
                                        //alert(1);
                                        tag = -1;
                                  });
        $("body").mousemove(function(ev)    {
                                 pos = {
                                        x:ev.clientX,
                                        y:ev.clientY
                                    };

                                function begin()    {
                                    if(tag == 1)    {
                                        dom.offset({top:pos.y,left:pos.x});
                                    }
                                }
                                function end()    {
                                    if(tag == -1)    {
                                        $("div").each(function()    {
                                                               //alert($("div").length);
                                                                   if ($(this).attr("id") != dom.attr("id"))    {
                                                                        
                                                                        var tmp = $(this).offset();
                                                                        if((pos.x > tmp.left) && (pos.x < (tmp.left + $(this).width())) && (pos.y > tmp.top) && (pos.y < (tmp.top + $(this).width())))    {                                                                                                                                        
                            dom.offset($(this).offset());
                            $(this).offset(rec);
                            tag = 0;
                            dom = null;
                            rec = null;
                            }
                                                                    } else    {
                                                                        dom.offset(rec);
                                                                    }
                                                               });
                                    }
                                }
                                begin();
                                end();
               });
                             });


</script>
</head>

<body>
    <div id="a" style="height:100px; width:100px; background-color:yellow;">a</div>
    <div id="b" style="height:100px; width:100px; background-color:blue;">b</div>
</body>
</html>

dwr 动态表格有关问题