Compared with the previous one, the effect of dragging is optimized.
JS Code: Fun.js
Copy Code code as follows:
_moveobj = null;//All variables, used to represent the current Div
Z_index = 0;//z Direction
Jquery.fn.mydrag=function () {
_ismove = 0; Whether to move 1. Move
_mouseleft = 0; Div Left coordinate
_mousetop = 0; Div top coordinates
$ (document). Bind ("MouseMove", function (e) {
if (_ismove==1) {
$ (_moveobj). Offset ({top:e.pagey-_mouseleft,left:e.pagex-_mousetop});
}
}. Bind ("MouseUp", function () {
_ismove=0;
$ (_moveobj). Removeclass ("Downmouse");
});
return $ (this). Bind ("MouseDown", function (e) {
_ismove=1;
_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 code:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>demo.htm</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script src= "Scripts/jquery-1.7.1.min.js" type= "Text/javascript" ></script>
<script src= "Myfun.js" type= "Text/javascript" ></script>
<style type= "Text/css" >
. mydiv{
Background: #EAEAEA;
width:100px;
height:100px;
BORDER:1PX solid;
Cursor:pointer;
Text-align:center;
line-height:100px;
}
. downmouse{
Cursor:move;
Filter:alpha (opacity=80);
-moz-opacity:0.5;
opacity:0.5;
Background-color: #ffffff;
}
</style>
<script type= "Text/javascript" >
$ (function () {
$ (". Mydiv"). Mydrag ();
$ ("#myDiv2"). Mydrag ();
})
</script>
<body>
<div id= "MyDiv1" class= "mydiv" > Drag 1</div>
<div id= "MyDiv2" class= "mydiv" > Drag 2</div>
<div id= "MyDiv3" class= "mydiv" > Drag 3</div>
<div id= "MyDiv4" class= "mydiv" > Drag 4</div>
<div id= "myDiv5" class= "mydiv" > Drag 5</div>
<div id= "MyDiv6" class= "mydiv" > Drag 6</div>
<div id= "Show" ></div>
</body>
