js代码:funjs
复制代码 代码如下:
_MoveObj = null;//全部变量
用来表示当前div
z_index =
;//z方向
jQuery
fn
myDrag=function(){
_IsMove =
; //是否移动
移动
_MouseLeft =
; //div left坐标
_MouseTop =
; //div top坐标
$(document)
bind("mousemove"
function(e){
if(_IsMove==
){
$(_MoveObj)
offset({top:e
pageY
_MouseLeft
left:e
pageX
_MouseTop});
}
})
bind("mouseup"
function(){
_IsMove=
;
$(_MoveObj)
removeClass("downMouse");
});
return $(this)
bind("mousedown"
function(e){
_IsMove=
;
_MoveObj = this;
var offset =$(this)
offset();
_MouseLeft = e
pageX
offset
left;
_MouseTop = e
pageY
offset
top;
z_index++;
_MoveObj
style
zIndex=z_index;
$(_MoveObj)
addClass("downMouse");
});
}
html代码:
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "
//W
C//DTD HTML
Transitional//EN">
<html>
<head>
<title>demo
htm</title>
<meta http
equiv="content
type" content="text/html; charset=UTF
">
<script src="scripts/jquery
min
js" type="text/javascript"></script>
<script src="myFun
js" type="text/javascript"></script>
<style type="text/css">
myDiv{
background:#EAEAEA;
width:
px;
height:
px;
border:
px solid;
cursor: pointer;
text
align: center;
line
height:
px;
}
downMouse{
cursor:move;
filter:alpha(Opacity=
);
moz
opacity:
;
opacity:
;
background
color:#ffffff;
}
</style>
<script type="text/javascript">
$(function(){
$("
myDiv")
myDrag();
//$("#myDiv
")
myDrag();
})
</script>
</head>
<body>
<div id="myDiv
" class="myDiv">拖拽
</div>
<div id="myDiv
" class="myDiv">拖拽
</div>
<div id="myDiv
" class="myDiv">拖拽
</div>
<div id="myDiv
" class="myDiv">拖拽
</div>
<div id="myDiv
" class="myDiv">拖拽
</div>
<div id="myDiv
" class="myDiv">拖拽
</div>
<div id="show"></div>
</body>
</html>
