Move icon Drag and get the moved coordinates

These two days in the need to seal the contract, required to be able to drag the chapter on the mobile side, and obtain the coordinates of the chapter. On the internet also read some of the relevant code, and finally compiled a demo. Tidy up in a hurry, the code still has a bug, when the first move chapter finger lifted up,
Click the chapter again and the coordinates will change, which is still to be improved later.

$ (function () {var cirx=0;//center x Horizontal var ciry=0;//center y ordinate var movex=0;//mobile contact X Horizontal The Var movey=0;//moves in the contact Y-ordinate var boxw=$ (". Box"). width ();//Zhangquan var boxh=$ (". Box"). h                Eight ();///Zhanggo//Console.log (boxw+ "" +boxh);                Half chapter wide, half chapter high var halfw=$ (". Box"). Width ()/2;                var halfh=$ (". Box"). Height ()/2;//console.log (halfw+ "" +HALFH); var conw=$ (". Con"). width ();//con wide var conh=$ (". Con"). Height ();//con high//Console.log (conw+ "" +c                ONH);                var conx=0;//distance from the left screen to Var cony=0;//distance from the top of conx=$ (". Con"). Offset (). left;//distance from left screen                                cony=$ (". Con"). Offset (). top;//distance from top//Console.log (conx+ "" +cony); $ (". Con"). On (' Touchstart ', function (e) {var move_left = E.originalevent.targettouches[0].pagex;//Get contact X Horizontal              Coordinate      var move_top = E.originalevent.targettouches[0].pagey;                Get contact Y ordinate});                    $ (". Con"). On (' Touchmove ', function (e) {//E.preventdefault (); The coordinate movey=e.originalevent.targettouches[0].pagey of x-axis during movex=e.originalevent.targettouches[0].pagex;//movement; Coordinates of the y-axis during movement//Console.log (MoveX + ' | ')                                        + Movey);                    CIRX=MOVEX-CONX-HALFW; ciry=movey-cony-halfh;//Console.log (Cirx + ' | ')                    + Ciry); Determine if (Cirx<0) {Cirx= 0; } if (Cirx>Conw-boxw)                    {Cirx = Conw-boxw; } if (Ciry<0) {Ciry= 0; } if (Ciry>conh-boxh)                    {ciry = Conh-boxh;                                           } $ (". Box"). CSS ({"Left": Cirx, "top": Ciry,                })                });                    $ (". Con"). On (' Touchend ', function (e) {CIRX=CIRX+HALFW;                    ciry=conh-(CIRY+HALFH); Console.log (Cirx + ' | ')                + Ciry);            }); }) 
 
 <div class= "Con", 
 <div class= "box" ></DIV> 
  
 </div> 
 

. con{width:300px;height:400px; overflow:hidden;border:1px Solid orange;margin:10px Auto 0;position:relative;text-al Ign:center;}. Box{width:60px;height:60px;background:red;opacity:. 6;position:absolute;left:0;top:0;border-radius:50%;z-index: 10;}. Imgshow{max-width:100%;height:auto;position:relative;top:0;left:0;z-index:1;}

Move icon Drag and get the moved coordinates