jQuery触发可拖动的开始和停止touchmove事件

上面的URL显示使用jQuery可拖动的功能组合编号锁定。我想在触控设备中使用它（js中的touchmove事件）。我尝试谷歌它，但我发现以下代码

jQuery(".lock-dial ul").draggable(); 
jQuery.fn.draggable = function() { 
    var offset = null; 
    var start = function(e) { 
     var orig = e.originalEvent; 
     var pos = jQuery(this).position(); 
     offset = {     
      y: orig.changedTouches[0].pageY - pos.top 
     }; 
    }; 
    var moveMe = function(e) { 
     e.preventDefault(); 
     var orig = e.originalEvent; 
     jQuery(this).css({ 
     top: orig.changedTouches[0].pageY - offset.y, 
     }); 
    }; 
    this.bind("touchstart", start); 
    this.bind("touchmove", moveMe); 
};

在上面的代码touchmove工作。但不正确。拖动触摸设备时可重复的数字不起作用，y轴的滚动位置与jQuery可拖动的不一致（在可拖动函数中，滚动y轴增量/减量35px）。

我想我没有正确解释。其实https://codepen.io/MrHill/pen/kLvcw组合号码锁功能与触摸设备一起使用。

此代码是我的兄弟学院迷你项目登录模块所必需的。任何人都可以帮我吗？提前致谢。

来源

2016-08-01 Dhaneesh Kumar

这段代码完全适合我。我发现这从Javascript Drag and drop for touch devices

function touchHandler(event) { 
    var touch = event.changedTouches[0]; 

    var simulatedEvent = document.createEvent("MouseEvent"); 
     simulatedEvent.initMouseEvent({ 
     touchstart: "mousedown", 
     touchmove: "mousemove", 
     touchend: "mouseup" 
    }[event.type], true, true, window, 1, 
     touch.screenX, touch.screenY, 
     touch.clientX, touch.clientY, false, 
     false, false, false, 0, null); 

    touch.target.dispatchEvent(simulatedEvent); 
    event.preventDefault(); 
} 

function init() { 
    document.addEventListener("touchstart", touchHandler, true); 
    document.addEventListener("touchmove", touchHandler, true); 
    document.addEventListener("touchend", touchHandler, true); 
    document.addEventListener("touchcancel", touchHandler, true); 
}

来源

2016-08-02 17:52:44

jQuery触发可拖动的开始和停止touchmove事件

回答

相关问题