I haven't updated my blog for a while, so I don't know what I am busy with, and I have no progress in my study.
Learn to write the JQ plug-in on your own in this week's free time.
Previously, I used Native JS to achieve a similar drag-and-drop div effect. Now I want to transform it into a small JQ plug-in based on the original idea and use it as a small exercise for making JQ plug-ins.
Html is Copy codeThe 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">
<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 ;}
. The 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>
Below is JQ. MoveBox. js Copy codeThe 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 );
Export 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 <-incluthis.parent().offset().le?parseint(%this.parent().css ("border-left-width "))){
ILeft = -incluthis.parent().offset().le?parseint(%this.parent().css ("border-left-width "));
} Else if (iLeft> border ("border-left-width" specify border -parseint(%this.css ("border-right-width" border ("border-left-width "))){
ILeft = inline ("border-left-width" inline -parseint(fig ("border-right-width" inline ("border-left-width "));
}
If (iTop <-effecthis.parent().offset().top-parseint(%this.parent().css ("border-top-width") + $ (document). scrollTop ()){
ITop = -incluthis.parent().offset().top-parseint(%this.parent().css ("border-top-width") + $ (document). scrollTop ();
} Else if (iTop> trim ("border-top-width" specify inline -parseint(%this.css ("border-bottom-width" Trim ("border-top-width "))){
ITop = histogram ("border-top-width" specify inline -parseint(%this.css ("border-bottom-width" Trim ("border-top-width "));
}
} Else {
If (iLeft <0 ){
ILeft = 0;
} Else if (iLeft> trim ("border-left-width" specify inline -parseint(%this.css ("border-right-width "))){
ILeft = descrithis.parent().width()-effecthis.width()-parseint(%this.css ("border-left-width" *-parseint(%this.css ("border-right-width "));
}
If (iTop <0 ){
ITop = 0;
} Else if (iTop> trim ("border-top-width" specify inline -parseint(%this.css ("border-bottom-width "))){
ITop = histogram ("border-top-width" specify inline -parseint(%this.css ("border-bottom-width "));
}
}
Export this.css ({
'Left': iLeft + "px ",
'Top': iTop + "px"
})
});
$ (Document). bind ("mouseup", function (){
$ (Document). unbind ("mousemove ");
$ (Document). unbind ("mouseup ");
});
});
});
};
$. Fn. MoveBox. defaults = {
Out: false // It is not allowed to exit by default.
};
}) (JQuery );