用于触摸设备的Javascript拖放

Question

我正在寻找可在触摸设备上使用的拖放插件。

我想要与允许“可放置”元素的jQuery UI插件类似的功能。

该插件jqtouch支持拖动操作，但没有落下。

这是仅支持iPhone / iPad的拖放操作。

谁能指出我在适用于android / ios的拖放插件的方向？

…或者可能会更新jqtouch插件以实现可投放性，它已经在Andriod和IOS上运行。

谢谢！

Answer 1

您可以使用JqueryUI进行拖放，并使用一个额外的库来将鼠标事件转换为您需要的触摸，我建议使用的库为/furf/jquery-ui-touch-punch，这从Jquery UI拖放到触摸装置

或者您可以使用我正在使用的这段代码，它也可以将鼠标事件转换为触摸事件，并且就像魔术一样工作。

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

在您的document.ready中，只需调用init（）函数