好资源导航 » 文章资讯 » 基于jQuery拖拽事件的封装

基于jQuery拖拽事件的封装

2023-07-10 14:08:05 206

本文实例为大家分享了基于jQuery封装的拖拽事件，供大家参考，具体内容如下

HTML代码：









Document

box

封装的jQuery拖拽事件：

;(function($){
$.fn.extend({
Drag(){
//把this存起来，始终指向操作的元素
_this=this;
this.on('mousedown',function(e){
//盒子距离document的距离
varpositionDiv=$(this).offset();
//鼠标点击box距离box左边的距离
vardistenceX=e.pageX-positionDiv.left;
//鼠标点击box距离box上边的距离
vardistenceY=e.pageY-positionDiv.top;
$(document).mousemove(function(e){
//盒子的x轴
varx=e.pageX-distenceX;
//盒子的y轴
vary=e.pageY-distenceY;
//如果盒子的x轴小于了0就让他等于0（盒子的左边界值）
if(x<0){
x=0;
}
//盒子右边界值
if(x>$(document).width()-_this.outerWidth()){
x=$(document).width()-_this.outerWidth();
}
//盒子的上边界值
if(y<0){
y=0;
}
//盒子的下边界值
if(y>$(document).height()-_this.outerHeight()){
y=$(document).height()-_this.outerHeight();
}
//给盒子的上下边距赋值
$(_this).css({
'left':x,
'top':y
});
});
//在页面中当鼠标抬起的时候，就关闭盒子移动事件
$(document).mouseup(function(){
$(document).off('mousemove');
});
})
//把this返回回去继续使用jqurey的链式调用
returnthis
}
})
})(jQuery)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com