jquery实现拖动效果（代码分享）
话不多说，请看代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<styletype="text/css">
.page{text-align:left;}
.dragDiv{border:1pxsolid#ddd;padding:10px;width:300px;margin:0auto;border-radius:4px;box-shadow:01px2px#fefefe;position:fixed;}
</style>
<divclass="dragDiv"id="drag">
<divclass="drag-head">自己动手试试</div>
<divclass="drag-body">
点击鼠标拖拖看
</div>
</div>
</body>
<scriptsrc="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
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<elTop?_drag.maxTop:elTop;
_drag.left=_drag.maxLeft<elLeft?_drag.maxLeft:elLeft;
el.css({
top:_drag.top,
left:_drag.left
})
})
}
bindDrag(document.getElementById('drag'));
</script>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！