div拖拽插件——JQ.MoveBox.js(自制JQ插件)

时间：2021-05-28

有一段时间没更新博客了，都不知道忙些什么，学习也没什么进展，惭愧。
这一周空闲的时间学着自己写一下JQ插件。

以前用原生的JS做过类似拖拽div的效果，现在按原思路改做成一个JQ的小插件，当作制作JQ插件的一个小练习。
html为
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="JQ.MoveBox.js"></script>
<script type="text/javascript">
$(".float-box").MoveBox();
$(".float-box1").MoveBox({out:true});
</script>
</body>
</html>

下面为JQ.MoveBox.js
复制代码 代码如下:
(function($){
var n = 1;
var o = {}
$.fn.MoveBox=function(options){
var opts = $.extend({}, $.fn.MoveBox.defaults, options);
return this.each(function(i){
$(this).mousedown(function(e){
o.iTop = $(this).position().top - e.pageY;
o.iLeft = $(this).position().left - e.pageX;
n++;
$this = $(this);
$this.css({'z-index':n});
$(document).bind("mousemove",function(e){
var iLeft = e.pageX + o.iLeft;
var iTop = e.pageY + o.iTop;
if(opts.out){
if(iLeft<-$this.parent().offset().left-parseInt($this.parent().css("border-left-width"))){
iLeft = -$this.parent().offset().left-parseInt($this.parent().css("border-left-width"));
}else if(iLeft>$(document).width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"))-$this.parent().offset().left-parseInt($this.parent().css("border-left-width"))){
iLeft = $(document).width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"))-$this.parent().offset().left-parseInt($this.parent().css("border-left-width"));
}
if(iTop<-$this.parent().offset().top-parseInt($this.parent().css("border-top-width"))+$(document).scrollTop()){
iTop = -$this.parent().offset().top-parseInt($this.parent().css("border-top-width"))+$(document).scrollTop();
}else if(iTop>$(window).height()+$(document).scrollTop()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"))-$this.parent().offset().top-parseInt($this.parent().css("border-top-width"))){
iTop = $(window).height()+$(document).scrollTop()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"))-$this.parent().offset().top-parseInt($this.parent().css("border-top-width"));
}
}else{
if(iLeft<0){
iLeft = 0;
}else if(iLeft>$this.parent().width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"))){
iLeft = $this.parent().width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"));
}
if(iTop<0){
iTop = 0;
}else if(iTop>$this.parent().height()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"))){
iTop = $this.parent().height()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"));
}
}
$this.css({
'left':iLeft +"px",
'top':iTop + "px"
})
});
$(document).bind("mouseup",function(){
$(document).unbind("mousemove");
$(document).unbind("mouseup");
});
});
});
};

$.fn.MoveBox.defaults = {
out:false //默认不可跑出线外
};
})(jQuery);

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章