Question

我正试图制作一个可拖动的div。

Javascript代码段：

document.getElementById('mySidenav').addEventListener('touchmove',
   function(event) {
       event.preventDefault();

       clickX = event.touches[event.touches[0].identifier].pageX;

       if(navigationOpen){          
        //draggable.style.width = Math.floor(clickX) + 'px';
        document.getElementById('mySidenav').setAttribute("style","width:"+ clickX + "px");
    }

}, false);

现在有两个问题：

1）拖动不起作用，直到我停止移动（不一定是结束触摸）

2）当<div>移动时，还有一些滞后。

我通过输出clickX来查看动作，并且在30fps下正常工作

我做错了吗？有没有办法做到这一点？

更新：我在Android上的Cordova中运行此程序

Answer 1

你没有粘贴HTML，所以这里只是一个可拖动div的快速示例，它在触摸设备上运行得非常好。

var nodeList = document.getElementsByClassName('dragme');

for (var i = 0; i < nodeList.length; i++) {
  var obj = nodeList[i];
  obj.addEventListener('touchmove', function(event) {
    var touch = event.targetTouches[0];
    event.target.style.left = touch.pageX + 'px';
    event.target.style.top = touch.pageY + 'px';
    event.preventDefault();
  }, false);
}

.dragme {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: grey;
  border: 2px solid black;
}

<div class="dragme"></div>

这里没有鼠标事件，所以它只能在触摸时工作，但希望这个例子对你有用。

小提琴玩：https://jsfiddle.net/thepio/fjmn0pej/

Answer 2

谢谢你们的帮助。出于某种原因，解决方案是从CSS中删除代码

.sideNav {
    ...
    ...

    transition: 0.5s; /* This */
}

但是当sideNav关闭/打开时，现在没有流畅的动画:(

通过触摸拖动div - 非常慢

2 个答案: