jquery實現簡單的拖拽效果實例兼容所有主流浏覽器

　　js代碼:funjs

復制代碼代碼如下:
_MoveObj = null;//全部變量用來表示當前div
z_index = ;//z方向
jQueryfnmyDrag=function(){
_IsMove = ; //是否移動移動
_MouseLeft = ; //div left坐標
_MouseTop = ; //div top坐標
$(document)bind("mousemove"function(e){
if(_IsMove==){
$(_MoveObj)offset({top:epageY_MouseLeftleft:epageX_MouseTop});
}
})bind("mouseup"function(){
_IsMove=;
$(_MoveObj)removeClass("downMouse");
});
return $(this)bind("mousedown"function(e){
_IsMove=;
_MoveObj = this;
var offset =$(this)offset();
_MouseLeft = epageX offsetleft;
_MouseTop = epageY offsettop;
z_index++;
_MoveObjstylezIndex=z_index;
$(_MoveObj)addClass("downMouse");
});
}

　　
html代碼:

復制代碼代碼如下:
<!DOCTYPE HTML PUBLIC "//WC//DTD HTML Transitional//EN">
<html>
<head>
<title>demohtm</title>
<meta httpequiv="contenttype" content="text/html; charset=UTF">
<script src="scripts/jqueryminjs" type="text/javascript"></script>
<script src="myFunjs" type="text/javascript"></script>
<style type="text/css">
myDiv{
background:#EAEAEA;
width: px;
height: px;
border: px solid;
cursor: pointer;
textalign: center;
lineheight: px;
}
downMouse{
cursor:move;
filter:alpha(Opacity=);
mozopacity:;
opacity: ;
backgroundcolor:#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>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20390.html