Question

如果我错了，请纠正我！

上面的url显示了使用jQuery draggable的功能组合数字锁定。我想在触摸设备中使用它（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 draggable（滚动拖动功能y轴增量/减量35px）。

我想我没有正确解释。实际上，https://codepen.io/MrHill/pen/kLvcw组合数字锁定功能可与触摸设备配合使用。

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

Answer 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);
}

jQuery通过touchmove事件触发可拖动的启动和停止

1 个答案: