【学习笔记】如何实现拖动

温馨提示：请在手机打开
html：
<div class="yaun" draggable="true">
<Span class="arrange">约吗</Span>
</div>
css：
{ margin: 0;padding: 0;}
html{ font-size: 62.5%; background: #000;}
.yaun{
position:absolute;
left: 50%;
bottom: 20px;
width: 70px;
height: 70px;
margin-left: -30px;
border-radius: 100%;
background: #f00;
-webkit-animation: yuananimil 1s ease ;
text-align: center;
line-height: 70px;
z-index: 99999;
}
.yaun .arrange{
font-size: 1.6em;
color: #fff;
position:relative;
-webkit-animation: listname 1.8s ease infinite;
}
@-webkit-keyframes yuananimil{
from{-webkit-transition: all; width: 0; height: 0;}
to{-webkit-transition: all; width: 70px; height: 70px;}
}
/
@keyframes listname{
from{-webkit-transition: all; opacity: 0; left: 0;}
to{-webkit-transition: all; opacity: 1; left: 30px;}
}*/
@-webkit-keyframes listname{
0{ -webkit-transform: rotate(0);}
12%{ -webkit-transform: rotate(30deg);}
24%{ -webkit-transform: rotate(-30deg);}
36%{ -webkit-transform: rotate(20deg);}
48%{ -webkit-transform: rotate(-20deg);}
60%{ -webkit-transform: rotate(15deg);}

72%{ -webkit-transform: rotate(-15deg);}
84%{  -webkit-transform: rotate(15deg);}
96%{ -webkit-transform: rotate(-15deg);}
100%{ -webkit-transform: rotate(0deg);}

}
@-moz-keyframes listname{
0{ -moz-transform: rotate(0);}
12%{ -moz-transform: rotate(30deg);}
24%{ -moz-transform: rotate(-30deg);}
36%{ -moz-transform: rotate(20deg);}
48%{ -moz-transform: rotate(-20deg);}
60%{ -moz-transform: rotate(15deg);}

72%{ -moz-transform: rotate(-15deg);}
84%{  -moz-transform: rotate(15deg);}
96%{ -moz-transform: rotate(-15deg);}
100%{ -moz-transform: rotate(0deg);}

}

$(document).ready(function(){

        var startX, startY, endX, endY;

         $(".yaun").on("touchstart", function(){
                 event.preventDefault();//取消事件的默认行为
                 var touch = event.touches[0];
                   startY = touch.pageY;
                   startX = touch.pageX;

             });

         $(".yaun").on("touchmove",function(){
                  event.preventDefault();
                   var touch = event.touches[0];
                   //endY = (startY - touch.pageY);
                  endX = touch.pageX;
                  endY = touch.pageY;
                 if(startX - endX>0){

                   $(this).css({
                  "left":startX-(startX - endX)

                        })  
              }

              if(startX - endX<0){

                   $(this).css({
                  "left":startX-(startX - endX)

                        })  
              }

              if(startY - endY>0){

                   $(this).css({
                  "top":startY-(startY - endY)

                        })  
              }

              if(startY - endY<0){

                   $(this).css({
                  "top":startY-(startY - endY)

                        })  
              }

             });

         $(".yaun").on("touchend",function(){
              event.preventDefault();
              //alert(startX - endX)
              if(startX - endX>0){

                   $(this).css({
                  "left":startX-(startX - endX)

                        })  
              }

              if(startX - endX<0){

                   $(this).css({
                  "left":startX-(startX - endX)

                        })  
              }

              if(startY - endY>0){

                   $(this).css({
                  "top":startY-(startY - endY)

                        })  
              }

              if(startY - endY<0){

                   $(this).css({
                  "top":startY-(startY - endY)

                        })  
              }

             });

})