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

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

WBOY

Release： 2016-05-16 17:33:35

Original

1012 people have browsed it

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