The following is the complete code for the drag-and-drop floating layer using jQuery. You can copy and save the code to an html file to experience the effect. You can also visit the following Web site experience: http://www.keleyi.com/keleyi/phtml/dragdiv.htm
Move the cursor over the layer and hold down the mouse to drag the layer.
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jQuery implements a drag-and-drop floating layer (version 2)-ke leyi </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>
</Head>
<Body style = "width: 2000px">
<Div> welcome! </Div>
<Div class = "box" id = "Drigging"> move the cursor over the layer. <br/> you can drag the layer by holding the mouse. <Br/> ke leyi </div>
<Div> www.keleyi.com </div>
</Body>
</Html>