拖拽

簡單拖拽:
                    window.onload=function(){
                                    var oBox=document.getElementById("box");
                                    oBox.onmousedown=function(ev){
                                                var e=ev||event;
                                                var disX=e.clientX-oBox.offsetLeft;   //鼠標到oBox左邊的距離
                                                var disY=e.clientY-oBox.offsetTop;
                                                document.onmousemove=function(ev){//document，讓oBox在整個文檔中移動
                                                        var e=ev||event;
                                                        var l=e.clientX-disX;  //e.clientX-disX的新位置
                                                        var t=e.clientY-disY;
                                                        if(l<=50){l=0}            //磁性吸附
                                                        else if(l>=document.documentElement.clientWidth-oBox.offsetWidth-50){
                                                            l=document.documentElement.clientWidth-oBox.offsetWidth;
                                                        }
                                                        if(t<=50){t=0}
                                                        else if(t>=document.documentElement.clientHeight-oBox.offsetHeight-50){
                                                            t=document.documentElement.clientHeight-oBox.offsetHeight;
                                                        }
                                                        oBox.style.left=l+'px';
                                                        oBox.style.top=t+'px';
                                        }
                                            document.onmouseup=function(){   //必須放在onmousedown裏面
                                                    document.onmousemove=null;//阻止鼠標移動事件
                                                    document.onmouseup=null; //防止鼠標屢次按下再擡起，觸發屢次事件
                                                    oBox.releaseCapture&&oBox.releaseCapture();//若是前面存在則使用後面
                                            }    
                                        oBox.setCapture&&oBox.setCapture();//ie下事件捕獲;支持的時候使用(if);鼠標按下的時候觸發捕獲，擡起釋放
                                        return false; //在ff,chrome下阻止選擇文字
                                    }
                                }

 

拖拽拉大框:
                        window.onload=function(){
                                        var oBox1=document.getElementById("box1");
                                        var oBox2=document.getElementById("box2");
                                        oBox2.onmousedown=function(ev){
                                                    var e=ev||event;
                                                    var downX=e.clientX;  //開始的座標
                                                    var downY=e.clientY;
                                                    var oldWidth=oBox1.offsetWidth; //開始的oBox1的寬高
                                                    var oldHeight=oBox1.offsetHeight;
                                                    document.onmousemove=function(ev){
                                                                    var e=ev||event;
                                                                    var moveX=e.clientX;//移動後的座標
                                                                    var moveY=e.clientY;
                                                                    var targetX=moveX-downX;//運動的距離
                                                                    var targetY=moveY-downY;
                                                                    oBox1.style.width=targetX+oldWidth+'px'; //運動後oBox1的新寬高
                                                                    oBox1.style.height=targetY+oldHeight+'px';
                                                    }
                                                    document.onmouseup=function(){
                                                            document.onmousemove=null;
                                                            document.onmouseup=null;
                                                            oBox2.releaseCapture&&oBox2.releaseCapture();
                                                    }
                                            oBox2.setCapture&&oBox2.setCapture();
                                            return false;
                                        }
                                    }