以前用原生的JS做過類似拖拽div的效果現在按原思路改做成一個JQ的小插件當作制作JQ插件的一個小練習
html為
代碼如下:
<!DOCTYPE html PUBLIC "
//W
C//DTD XHTML
Transitional//EN" "
<html xmlns="
<head>
<meta http
equiv="Content
Type" content="text/html;charset=gb
" />
<title></title>
<style type="text/css">
*{margin:
;padding:
;}
#box{width:
px;height:
px;margin:
px auto;position:relative;border:
px solid #ccc;border
left:
px solid #ccc;}
float
box{width:
px;height:
px;background:#
;color:#fff;position:absolute;top:
px;left:
px;cursor:move;z
index:
;border:
px solid #ccc;border
right:
px solid #fc
;}
float
box
{width:
px;height:
px;background:#f
;color:#fff;position:absolute;top:
;left:
px;cursor:move;border
top:
px solid #
;}
</style>
</head>
<body>
<div id="box">
<div class="float
box"></div>
<div class="float
box
"></div>
</div>
<script type="text/javascript" src="
<script type="text/javascript" src="JQ
MoveBox
js"></script>
<script type="text/javascript">
$("
float
box")
MoveBox();
$("
float
box
")
MoveBox({out:true});
</script>
</body>
</html>
下面為JQMoveBoxjs
代碼如下:
(function($){
var n =
;
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<
){
iLeft =
;
}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<
){
iTop =
;
}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);
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20266.html
