可拖拽停靠吸附的DIV该如何实现？

就像百度空间一样 在自定义布局的时候 能将一个模块拖动到任意的区域   该如何实现？没有具体代码说下大致的思路也行啊。。

解决方案 »

  1.   

    Window：窗体模块
    WindowManager:窗体管理器
    Layout：布局模块
      

  2.   

    你说的好像有点像下面的代码实现的差不多
    <!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=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    #div1{
        position:absolute;
        cursor:pointer;
        width:200px;
        height:200px;
        background:#F00;
        z-index:10;
        -moz-user-select:none;
    }
    </style>
    </head>
    <body >
    <div id="div1" onmousedown="handleMouseDown(event)"></div>         
    <script type="text/javascript">
    var EventUtil = new Object();
    EventUtil.addEventHandler = function (oTarget , sEventType , fnHandler){
        if( oTarget.addEventListener ){
            oTarget.addEventListener(sEventType ,fnHandler, false);
        }else if( oTarget.attachEvent ){
            oTarget.attachEvent('on' + sEventType , fnHandler );
        }
        else{
            oTarget['on'+sEventType] = fnHandler;
        }
    }
    EventUtil.removeEventHandler = function (oTarget , sEventType , fnHandler){
        if( oTarget.removeEventListener ){
            oTarget.removeEventListener(sEventType , fnHandler , false);
        } 
        else if( oTarget.detachEvent ){
            oTarget.detachEvent('on' + sEventType , fnHandler );
        }
        else{
            oTarget['on'+sEventType] = null;
        }
    }
    EventUtil.getEvent = function(){
        if( window.event ){        
            return window.event;
        }else{
            return  EventUtil.getEvent.caller.arguments[0];
        }
    }
    var iDiffX = 0;
    var iDiffY = 0;
    var oDiv = document.getElementById( 'div1' );
    function handleMouseDown(){  
        var oEvent = EventUtil.getEvent();
        iDiffX = oEvent.clientX - oDiv.offsetLeft;
        iDiffY = oEvent.clientY - oDiv.offsetTop;
        EventUtil.addEventHandler(document,'mousemove',handleMouseMove);
        EventUtil.addEventHandler(document,'mouseup', handleMouseUp);
    }
    function handleMouseMove(){
        var oEvent = EventUtil.getEvent();
        oDiv.style.left = ( oEvent.clientX - iDiffX ) + 'px';
        oDiv.style.top = ( oEvent.clientY - iDiffY ) + 'px';
    }
    function handleMouseUp(){
        EventUtil.removeEventHandler(document,'mousemove',handleMouseMove);
       EventUtil.removeEventHandler(document,'mouseup', handleMouseUp);
    }
    </script>  
    </body>
    </html>