使用plus.nativeObj.View如何编写拖动效果

分类：Native.js

Webview nativeObj

var nativeView = new plus.nativeObj.View('testNview', {  
    top: '300px',  
    left: (sreenWidth - 40) + 'px',  
    width: '40px',  
    height: '80px'  
});

已使用该方式创建了view，现在想实现随手指拖动的效果。
原本使用div的方式实现了，但打开外链窗口会被覆盖，所以先使用这种方式创建。
看文档里面，没有找到如何获取当前view的坐标，有高手做过吗？
感觉设置原生View绘制方面的东西好少啊

2020-09-07 11:55 负责人:无分享

8 个回复

w***@126.com (作者)

拖动可以了，但是touchend执行不到，执行到就会触发click事件。
可以来个人帮帮忙不。。。。。
View点击事件监听：

nativeView.addEventListener("click", function(e) {  
    var clientX = e.clientX;  
    var clientY = e.clientY;  
    var target = e.target;  
    if (0 < e.clientY && e.clientY <= 40) {  
        mui.alert('点击按钮1');  
   } else {  
        mui.toast('点击按钮2');  
    }  
});

View拖动监听：

nativeView.addEventListener("touchstart", function(event) {  
   flag = true;  
   var touch;  
   if (event.touches) {  
      touch = event.touches[0];  
   } else {  
      touch = event;  
   }  
   cur.x = touch.clientX;  
   cur.y = touch.clientY;  
});  
nativeView.addEventListener("touchmove", function(event) {  
   if (flag) {  
      var touch;  
      if (event.touches) {  
         touch = event.touches[0];  
      } else {  
         touch = event;  
      }  
      moveX = touch.pageX - cur.x;   
      moveY = touch.pageY - cur.y;   
      x = moveX;  
      y = moveY;  
      if (x < 0) {  
         x = 0;  
      } else if (x > (boxWidth - modelWidth)) {  
         x = sreenWidth - 40;  
      }  
      if (y < 0) {  
         y = 0;  
      } else if (y > (boxHeight - modelHeight)) {  
         y = (boxHeight - modelHeight);  
      }  
      nativeView.setStyle({  
         top: y + 'px',  
         left: x + 'px'  
      });  
      // 原本是touchend里的内容，判断离那边近停靠哪边  
      setTimeout(function(){  
         var pointX = x + modelWidth / 2;  
         var pointY = y + modelHeight / 2;  
         if (pointX < boxWidth / 2) {  
            x = 0;  
         } else {  
            x = sreenWidth - 40;  
         }  
         nativeView.setStyle({  
            top: y + 'px',  
            left: x + 'px'  
         });  
      },1000);  
   }  
});