A period of time did not update the blog, do not know what to do, study also no progress, ashamed.
This week's free time to learn to write their own JQ plug-ins.
Formerly with the original JS done similar drag div effect, now according to the original idea to make a JQ small plug-in, as a small exercise JQ plug-ins.
HTML is
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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;p osition: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;p osition:absolute;top:0;left:200px;cursor:move ; border-top:10px solid #000;}
</style>
<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>
the following is JQ.MoveBox.js
Copy Code code 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//default non-running outside
};
}) (JQuery);
