重新整理了一篇自己寫過的一個jquery拖動[代碼](http://caibaojian.com/c/code "代碼"),精簡了一些東西。
*? 1.支持自適應(yīng)(縮放時,不會看不到,始終會在窗口內(nèi),記錄位置)
###?[html](http://caibaojian.com/t/html "html")代碼:
type="text/css">.page{text-align:left;}.dragDiv{border:1px solid #ddd; padding:10px; width:300px; margin:0 auto; border-radius:4px; box-shadow:0 1px 2px #fefefe; position: fixed;}>class="dragDiv"id="drag">class="drag-head">點擊拖動>class="drag-body">蔡寶堅博客專注于前端開發(fā),歡迎關(guān)注和收藏。/>微博:>http://caibaojian.com/>>>
###[jQuery](http://caibaojian.com/t/jquery "jQuery常用代碼")代碼:
```javascript
var_drag= {};_drag.top=0;//拖動過的位置距離上邊_drag.left=0;//拖動過的位置距離左邊_drag.maxLeft;//距離左邊最大的距離_drag.maxTop;//距離上邊最大的距離_drag.dragging=false;//是否拖動標(biāo)志//拖動函數(shù)functionbindDrag(el){varwinWidth=$(window).width(),winHeight=$(window).height(),objWidth=$(el).outerWidth(),objHeight=$(el).outerHeight();_drag.maxLeft=winWidth-objWidth,_drag.maxTop=winHeight-objHeight;varels=el.style,x=0,y=0;varobjTop=$(el).offset().top,objLeft=$(el).offset().left;$(el).mousedown(function(e){_drag.dragging=true;_drag.isDragged=true;x=e.clientX-el.offsetLeft;y=e.clientY-el.offsetTop;el.setCapture&&el.setCapture();$(document).bind('mousemove',mouseMove).bind('mouseup',mouseUp);returnfalse;});functionmouseMove(e){e=e||window.event;if(_drag.dragging){_drag.top=e.clientY-y;_drag.left=e.clientX-x;_drag.top=_drag.top>_drag.maxTop?_drag.maxTop:_drag.top;_drag.left=_drag.left>_drag.maxLeft?_drag.maxLeft:_drag.left;_drag.top=_drag.top<0?0:_drag.top;_drag.left=_drag.left<0?0:_drag.left;els.top=_drag.top+'px';els.left=_drag.left+'px';returnfalse;}}functionmouseUp(e){_drag.dragging=false;el.releaseCapture&&el.releaseCapture();e.cancelBubble=true;$(document).unbind('mousemove',mouseMove).unbind('mouseup',mouseUp); }$(window).resize(function(){varwinWidth=$(window).width(),winHeight=$(window).height(),el=$(el),elWidth=el.outerWidth(),elHeight=el.outerHeight(),elLeft=parseFloat(el.css('left')),elTop=parseFloat(el.css('top'));_drag.maxLeft=winWidth-elWidth;_drag.maxTop=winHeight-elHeight;_drag.top=_drag.maxTop
```