jquery Implementation Custom window drag and drop _jquery

We often see on the Web page that when a button is clicked, a custom window pops up and can be arbitrarily dragged to change its position.

Using jquery to implement drag and drop, you must have the jquery file, the implementation steps:

1, the introduction of jquery files

2. Write JS script

Specific code:

HTML code:

Copy Code code as follows:

<button id= "Show" > Display </button>
<div class= "Win" >
<div class= "WTop" ><p style= "float:right;margin:5px 5px 0px 0px;color:white" id= "hidden" >x</p></ Div>
<div class= "Content" ></div>
</div>

CSS style:

Copy Code code as follows:

<style type= "Text/css" >
Win{width:500px;height:600px;background: #000000; border-radius:8px;box-shadow:0px 0px 5px 10px;opacity:0.8; Position:absolute;left:0;top:0;display:none}
. Win. Wtop{height:30px;width:100%;cursor:move}
. Win. Content{height:570px;width:100%;border-radius:5px;background:white}
</style>

JS script:

Copy Code code as follows:

<script language= "javascript" type= "Text/javascript" >
$ (function () {
Drag
Draganddrop ();
Initialization location
Initposition ();
Click on the button
CLICKSHOWBTN ();
});
Drag
function Draganddrop () {
var _move=false;//move Tag
var _x,_y;//the relative position of the mouse from the upper-left corner of the control
$ (". WTop"). MouseDown (function (e) {
_move=true;
_x=e.pagex-parseint ($ (". Win"). CSS ("left");
_y=e.pagey-parseint ($ (". Win"). CSS ("top");
$ (". WTop"). Fadeto (20,0.5);//Click Start drag and transparent display
});
$ (document). MouseMove (function (e) {
if (_move) {
The position of the mouse when the Var x=e.pagex-_x;//is moved the absolute position of the upper-left corner of the control
var y=e.pagey-_y;
$ (". Win"). css ({top:y,left:x});//new position of control
}
}). MouseUp (function () {
_move=false;
$ (". WTop"). Fadeto ("Fast", 1);//stop moving and revert to opaque after releasing the mouse
});
}
Initialize the position of the drag div
function Initposition () {
Calculate Initialization Location
var itop= ($ (document). Height ()-$ (". Win"). Height ())/2;
var ileft= ($ (document). Width ()-$ (". Win"). Width ())/1.8;
Set where the DIV is dragged
$ (". Win"). css ({top:itop,left:ileft});
}
Click on the Display button
function clickshowbtn () {
$ ("#show"). Click (function () {
$ (". Win"). Show (1000);
});

$ ("#hidden"). Click (function () {
$ (". Win"). Hide (1000);
});
}
</script>

Introduction of JS File

Copy Code code as follows:

<script type= "Text/javascript" src= "Js/jquery-1.10.2.min.js" ></script>