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

jQuery trigger draggable start and stop by touchmove event

本文关键字：拖动 启动 触摸 移动 事件 jQuery      更新时间：2023-09-26

如果我错了，请纠正我！

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

上面的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可拖动（在可拖动功能中滚动y轴增量/减量35px）。

我想我没有正确解释。事实上https://codepen.io/MrHill/pen/kLvcw组合号码锁定功能适用于触摸设备。

这段代码是我哥哥大学登录模块中的迷你项目所需要的。有人能帮我吗？提前谢谢。

这段代码非常适合我。我从触摸设备的Javascript拖放中找到了这段代码

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);
}
相关文章：