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
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" >
<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;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>
</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>
The following is 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//default non-running outside
};
}) (JQuery);
