div drag and drop plug-in——JQ.MoveBox.js (self-made JQ plug-in)_jquery

I haven’t updated my blog for a while. I don’t know what I’m busy with, and I haven’t made much progress in my studies. I feel ashamed.
In my free time this week, I will learn to write my own JQ plug-in.

I used native JS to create an effect similar to dragging divs. Now I have changed it into a small JQ plug-in based on the original idea, as a small exercise in making JQ plug-ins.
html is

Copy the code The code is as follows:

< ;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">

The following is the copy code of JQ.MoveBox.js

The code is as follows:

(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);