实现一个页面的多个文本框拖拽互换位置效果

本帖最后由 liuzuowei007 于 2010-04-28 11:14:00 编辑

解决方案 »

  1.   

    <!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>
    说实话，因为急着摸索功能，代码写的很烂，但是理论上就是这样去做的。进供参考