jQuery通过touchmove事件触发可拖动开始和停止答案

【问题标题】：jQuery trigger draggable start and stop by touchmove eventjQuery通过touchmove事件触发可拖动开始和停止
【发布时间】：2016-08-01 19:37:14
【问题描述】：

如有错误请指正！

https://codepen.io/MrHill/pen/kLvcw

上面的 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 密码锁功能适用于触摸设备。

登录模块中我的兄弟大学迷你项目需要此代码。有人可以帮我吗？提前致谢。

【问题讨论】：

标签： javascript jquery jquery-ui draggable

【解决方案1】：

这段代码非常适合我。我是从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);
}

【讨论】：