Here's the complete code to implement a drag-and-drop layer using jquery, which can be experienced by copying it to an HTML file. You can also access the following Web site experience Effect: http://www.keleyi.com/keleyi/phtml/dragdiv.htm
The cursor moves to the layer, holding down the mouse to drag the layer.
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jquery implementation of a sliding layer (version 2)-Ke keeper </title>
<script type= "Text/javascript" src= "Http://www.keleyi.com/keleyi/pmedia/jquery-1.8.2.min.js" ></script >
<style type= "Text/css" >
box{Position:absolute; top:200px left:400px; width:200px; height:200px; background: #8a9bca; cursor:move;
</style>
<script type= "Text/javascript" >
$ (document). Ready (function (e) {
$ (". Box"). MouseDown (function (e) {
IDIFFX = E.pagex-$ (this). Offset (). Left;
Idiffy = E.pagey-$ (this). Offset (). Top;
$ (document). MouseMove (function (e) {
$ (". Box"). CSS ({"Left": (E.PAGEX-IDIFFX), "Top": (E.pagey-idiffy)});
});
});
$ (". Box"). MouseUp (function () {
$ (document). Unbind ("MouseMove");
});
});
</script>
<body style= "width:2000px" >
<div> Welcome! </div>
<div class= "box" id= "drigging" > Cursor moved to the layer, <br/> Hold down the mouse to drag the layer. <br/><br/><br/><br/> Collayi </div>
<div>www.keleyi.com</div>
</body>