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

140 阅读 0 评论 93 点赞

我是靠谱客的博主丰富白云，最近开发中收集的这篇文章主要介绍div拖拽插件——JQ.MoveBox.js(自制JQ插件)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

以前用原生的JS做过类似拖拽div的效果，现在按原思路改做成一个JQ的小插件，当作制作JQ插件的一个小练习。
html为

复制代码代码如下:

 
<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
<title></title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
#box{width:500px;height:500px;margin:200px auto;position:relative;border:1px solid #ccc;border-left:2px solid #ccc;} 
.float-box{width:100px;height:100px;background:#000;color:#fff;position:absolute;top:20px;left:10px;cursor:move;z-index:2;border:2px solid #ccc;border-right:10px solid #fc0;} 
.float-box1{width:200px;height:200px;background:#f30;color:#fff;position:absolute;top:0;left:200px;cursor:move;border-top:10px solid #000;} 
</style> 
</head> 
<body> 
<div id="box"> 
<div class="float-box"></div> 
<div class="float-box1"></div> 
</div> 
<script type="text/javascript" src="http://code.jquery.com/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); 