touchmove写一个移动端拖动按钮

//hkMessage可拖动按钮class 按钮40px*40px
var headerHeight = 0;
var touchwidth = 0;
var touchheight = 0;
//touch.pageX 拖动地点距离y轴的距离
//touch.pageY 拖动地点距离x轴的距离
angular.element(document.getElementsByClassName('hkMessage')).on('touchstart', function(evt) {
                  var e = event || evt;
                  e.preventDefault();//阻止其他事件
              }).on('touchmove', function(evt) {
                  var e = event || evt;
                  e.preventDefault();//阻止其他事件
                  // 如果这个元素的位置内只有一个手指的话
                  //console.log(e.targetTouches)
                  if (e.targetTouches.length == 1) {
                      var touch = e.targetTouches[0];  // 把元素放在手指所在的位置
                      // 判断拖动左右两边的位置,不能让他移出中间展示框
                      if(touch.pageX<=20){
                        touchwidth = 20
                      }else if(touch.pageX>document.body.clientWidth - 20){
                        touchwidth = document.body.clientWidth - 20
                      }else{
                        touchwidth = touch.pageX;
                      }
                      // 判断拖动上下距离,不能让他移出中间展示框
                      
                      if(touch.pageY<20){
                        touchheight = 20;
                      }else if(touch.pageY>document.body.clientHeight - 78){
                        touchheight = document.body.clientHeight - 78;
                      }else{
                        touchheight = touch.pageY;
                      }
                      // 给图片赋值
                      document.getElementsByClassName('hkMessage')[0].style.top = touchheight-20+'px';
                      document.getElementsByClassName('hkMessage')[0].style.left = touchwidth-20+'px'
                  }
              }).on('touchend', function(evt) {
                  var e = event || evt;
                  e.preventDefault();//阻止其他事件
              })