These two days in the demand for contract stamps, require that the moving end can drag the stamp, and get the coordinates of the stamp. On the Internet also read some related code, and finally sort out a demo. The code is still in bug, when the first move finger is lifted.
Once again click the chapter, the coordinates will change, this point needs to be improved later.
$(function(){
var cirX=0;//Center X abscissaVar cirY=0; / / center Y ordinateVar moveX=0; / / moving contact X abscissaVAR moveY=0; / / moving contact Y ordinateVar boxW=$(".Box").Width (); / / Zhang KuanVar boxH=$(".Box "".Height (); / / Zhang Gao/ / console.log (boxW+ "+boxH");/ / half chapter wide, half chapter highVar halfW=$(".Box").Width () /2;Var halfH=$(".Box").Height () /2;/ / /Console.log (halfW+ "+halfH");Var conW=$(".Con").Width (); //con widthVar conH=$(".Con").Height (); //con high/ / console.log (conW+ "+conH");VarConX=0; / / distance from left screenVar conY=0; / / distance from top to topConX=$(".Con").Offset ().Left; /Distance from left screenConY=$(".Con").Offset ().Top; / / distance from top to top/ / console.log (conX+ "+)ConY);$(".Con").On ('touchstart', function (E) {VAR move_left = e.originalEvent.targetTouches[0].pageX; / / get contact X abscissaVar move_top =E.originalEvent.targetTouches[0].pageY; / / get the contact Y ordinate.});$(".Con").On('touchmove', function (E) {/ / e.preventDefault ();MoveX=e.origCoordinates of X axis in inalEvent.targetTouches[0].pageX / / mobile processMoveY=e.originalEvent.targetToucheCoordinates of Y axis in s[0].pageY / / mobile process/ / console.log (moveX + '' + moveY);CirX=moveX-conX-halfW;CirY=moveY-conY-halfH;/ / /Console.log (cirX + '' + cirY);/ / judgementIf (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>
<img src="images/eg.png" class="imgShow"/>
</div>
.con{
width: 300px;
height: 400px;
overflow: hidden;
border: 1px solid orange;
margin: 10px auto 0;
position: relative;
text-align: 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;
}
