jquery Implementation Custom window drag and drop randomly

  Click on a button, pop-up a custom window, and can be arbitrarily dragged, jquery can also achieve this function, here is a good example, you can feel the

We often see on the Web page, when clicked a button, pop-up a custom window, and can drag and drop arbitrarily, thus change its position     use jquery to implement drag and drop, you must have jquery file, implementation steps:    1, Introduce jquery file     2, write JS script     Specific code:    HTML 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:  code is 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:    code as follows: <script language= " JavaScript "type=" Text/javascript >  $ (function () { //Drag   Draganddrop (); //Initialization position   Initposition (); //click button   CLICKSHOWBTN (); }); //drag   function Draganddrop () {   var _move=false;//move tag   var _x,_y;//the relative position of the mouse away 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 transparently 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});//control new position  }  }). MouseUp (function () {  _move=false; //$ (". WTop"). Fadeto ("Fast", 1);//Stop moving after releasing the mouse and revert to opaque  });  } //Initialize drag div position   function initposition () { //Compute initialization location   var itop= ($ (document). Height ()-$ (". Win "). Height ())/2;  var ileft= ($ (document). Width ()-$ (". Win "). Width ())/1.8; //Set the position of the dragged Div   $ (". Win " ). css ({top:itop,left:ileft}); } //Click on display button   function clickshowbtn () {  $ ("#show"). Click (function () {  $ (". Win"). Show (1000); });    $ ("#hidden"). Click (function () {   $ (". Win"). Hide (1000); }); }  </script>    The introduction of JS file     code is as follows: <script Type= "Text/javascript" src= "Js/jquery-1.10.2.min.js" ></script>