如题，只能获取到第一个坐标，真机连调中无法获取拖动中的其它坐标，直接用浏览器以网页的形式打开却是OK的；
document.getElementById("bodyDiv").addEventListener('drag',function(e){
console.log(e.detail.move.x);
});
gerry
- 发布：2014-12-10 23:13
- 更新：2014-12-12 21:46
- 阅读：2506
gerry (作者)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<div id="div1" style="background-color: red;width: 300px;height: 200px;"></div>
<div id="div2" style="background-color: blue;width: 300px;height: 200px;"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
document.getElementById("div1").addEventListener('drag',function(e){
document.getElementById("div1").innerHTML = e.detail.move.x;
});
document.getElementById("div2").addEventListener('touchmove',function(e){
document.getElementById("div2").innerHTML = e.targetTouches[0].pageX;
});
}
</script>
这样一个简单的demo，真机联调的时候两个事件都只能取到第一个坐标，得不到move差；请帮看下
临时解决办法，后续我们会考虑在框架上解决该问题
document.getElementById("bodyDiv").addEventListener('drag',function(e){
console.log(e.detail.move.x);
e.detail.gesture.preventDefault();//增加这一行代码来阻止native scroll event
});将console.log换成页面上的某个文本内容来显示。
真机联调的console.log输出是需要手机和Hbuilder通讯的，性能，时效不高，
如果直接在页面上输出，还是只有第一个坐标，把代码贴出来我看看
touch事件中的detail有很多信息，你可以根据你的需求来使用，比如deltaX,deltaY,这是move的坐标差
我们的很多拖拽控件都是内置的事件实现的，比如switch控件，slider控件，如果是drag事件有问题的话，那这些基于drag事件的控件也会有问题的
-
gerry (作者)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<div id="div1" style="background-color: red;width: 300px;height: 200px;"></div>
<div id="div2" style="background-color: blue;width: 300px;height: 200px;"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
document.getElementById("div1").addEventListener('drag',function(e){
document.getElementById("div1").innerHTML = e.detail.move.x;
});
document.getElementById("div2").addEventListener('touchmove',function(e){
document.getElementById("div2").innerHTML = e.targetTouches[0].pageX;
});
}
</script>
这样一个简单的demo，真机联调的时候两个事件都只能取到第一个坐标，得不到move差；请帮看下
2014-12-11 00:03
DCloud_UNI_FXY
我用你的代码测试了，红色div和蓝色div在上边drag的时候，坐标都是时刻变化的
你看看你的mui的js版本是不是最新的，或者换个其他手机测试一下。
2014-12-11 11:43
gerry (作者)
回复 DCloud_UNI_FXY: 有更新最新的MUI（Mui v0.8.0），也有换了一部三星 note3测试，还是不行；两部手机都是4.42系统的，会不会在4.42上有问题？
2014-12-11 20:19
gerry (作者)
回复 DCloud_UNI_FXY:我找了台4.2.2的就是OK的，应该是4.4.2有bug；请帮忙解决下吧
2014-12-11 20:55