有一段時間沒更新博客了，都不知道忙些什么，學習也沒什么進展，慚愧。
這一周空閑的時間學着自己寫一下JQ插件。
以前用原生的JS做過類似拖拽div的效果，現在按原思路改做成一個JQ的小插件，當作制作JQ插件的一個小練習。
html為
View Code
<!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
View Code
(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);
轉載請注明出處，謝謝。