重新整理了一篇自己写过的一个jquery拖动[代码](http://caibaojian.com/c/code "代码")，精简了一些东西。

### 实现以下目标：

*  1.支持自适应（缩放时，不会看不到，始终会在窗口内，记录位置）

*  2.拖动的元素不会拖到外面去（保持始终可见）

*  3.兼容IE浏览器，使用流畅

### [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">蔡宝坚博客专注于前端开发，欢迎关注和收藏。/>微博：href="http://weibo.com/kujian"target="_blank">http://weibo.com/kujian>/>博客：href="http://caibaojian.com"target="_blank">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;//是否拖动标志//拖动函数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

```

### 演示地址：[演示](http://caibaojian.com/demo/2016/3/drag.html)