自定义可拖动插件不适用于触摸事件

Question

我有一个使用 3dtransforms 的可拖动交互插件，但我不知道如何使它与触摸设备一起工作，我尝试将所有 mousedown、mouseup、mousemove 事件替换为完全的 touchstart、touchend、rouchmove 事件，它似乎可以工作，因为每次我拖动控制台打印出 NaN 时，显然什么都没有发生，但它似乎可以识别触摸事件，所以我不知道为什么它不起作用。可在此处获得的适用于桌面的示例：https://jsfiddle.net/3orh783q/

（这里没有使用 jQuery UI 之类的东西，只是 jQuery）

$(document).ready(function() {  

    //Custum draggable functionality
    $.fn.draggable = function() {
      var $document = $(document)
        , mouse = { update: function(e) {this.x = e.pageX; this.y = e.pageY;} };

      return this.each(function(){
        var $elem = $(this);
        $elem.bind('mousedown.drag', function(e) {
          mouse.update(e);
          if ( !/^(relative|absolute)$/.test($elem.css('position') ) ) {
            $elem.css('position', 'relative');
          }
          $document.bind('mousemove.drag', function(e) {
            var translateX = (parseInt(getTranslate($elem, 'x'))||0) + (e.pageX - mouse.x),
                translateY = (parseInt(getTranslate($elem, 'y'))||0) +  (e.pageY - mouse.y);
            // $elem.css({
            //   left: (parseInt(getTranslate($elem, 'x'))||0) + (e.pageX - mouse.x) + 'px',
            //   top: (parseInt(getTranslate($elem, 'y'))||0) +  (e.pageY - mouse.y) + 'px'
            // });
            $elem.css({
                'transform': 'translate3d('+translateX+'px, '+translateY+'px, 0)',
                '-webkit-transform': 'translate3d('+translateX+'px, '+translateY+'px, 0)'
            });
            console.log(translateX);
            console.log(translateY);
            mouse.update(e);
            e.preventDefault();
          });
          $document.one('mouseup.drag', function(e) {
            $document.unbind('mousemove.drag');
          });
          e.preventDefault();
        });  
      });

        //Get current translate values
        function getTranslate(el, pos) {
            var translate = '',
                position = 0;

                // matrix(1, 0, 0, 1, 3, 5)

            if(el.css('transform')) {
                translate = el.css('transform');
            }
            else if(el.css('-webkit-transform')) {
                translate = el.css('-webkit-transform');
            } else {
                translate = '';
            }

            var result = translate.match(/\d+/g).slice(-2);

            if(pos == 'x') {
                position = result[0];
            }
            else if(pos == 'y') {
                position = result[1];
            }

            return position;
        }
    }

    //Initialize dragable map
    $('.dragMe').draggable();

});

编辑

玩过之后好像 pageX 和 pageY 没有用触摸设备定义

Answer 1

Mousemove、mousedown 和 mouseup 在触控设备中不起作用。您必须使用touchmove、touchstart 和touchend 更改它。

你可以像这样制作一个对象：

if(touch) {
    events['down'] = "touchstart";
    events['up'] = "touchend";
    events['move'] = "touchmove";
} else {
    events['down'] = "mousedown";
    events['up'] = "touchend";
    events['move'] = "touchmove";
}

当你需要使用它时：

$elem.bind(events['down'], function(e) {
     // your stuff
});