Jquery 使用触摸功能从左向右简单拖动

我想知道是否有一个不使用jqueryui的touch拖动功能可以与下面的代码一起使用，或者是否可以修改此代码以包含touch代码

为个人使用而修改的插件： （）

HTML：

<div class="divider">
<a href="" title="Drag to view the puzzle" class="scissors"></a>';
<img src="/wp-content/themes/pd/images/page-curl.png" width="0" alt="cutting paper" />
</div>

你可以在这里看到它的作用（拖动剪刀）：

这适用于鼠标手势，但不适用于触摸

提前谢谢

以下是我找到的答案：

我最终删除了事件。preventDefault（）；所以像这样：

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

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

---

然后我在document.ready中调用了init（），然后调用了我在初始问题中提到的可拖动插件。这就像一种魅力。

我找到了一种接近有效的解决方案，但我不确定如何在最初不需要单击事件的情况下使其有效。只是不确定在哪里放置init（），这样滚动事件就不会被劫持。

<div class="divider">
<a href="" title="Drag to view the puzzle" class="scissors"></a>';
<img src="/wp-content/themes/pd/images/page-curl.png" width="0" alt="cutting paper" />
</div>

.divider { margin: 40px 0; border-top: 1px dashed #1abff0; background: #fff; position: relative; }
.scissors { position: relative; display: inline-block; top: 0; }
.scissors:after { width: 22px; height: 16px; content: "\e606"; font-family: 'icomoon', Arial, Helvetica, sans-serif; font-size: .7em; position: absolute; left: -22px; top: -29px; color: #232323; z-index: 1000; }
.scissors.draggable:after { content: "\e605"; }
.divider img { position: absolute; top: 0; max-height: none !important; z-index: 0; }

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

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