Javascript拖放触摸设备 [英] Javascript Drag and drop for touch devices

问题描述

我正在寻找一个拖累和放大器适用于触摸设备的DROP插件。

I am looking for a drag & DROP plugin that works on touch devices.

我想要与 jQuery UI插件，允许droppable元素。

I would like similar functionality to the jQuery UI plugin which allows "droppable" elements.

jqtouch插件支持拖动，但不会掉线。

The jqtouch plugin supports dragging, but no dropping.

这里是拖累和放大只支持iPhone / iPad的支持。

Here is drag & drop that only supports iPhone/iPad.

任何人都可以指向我的拖累方向drop android适用于android / ios？

Can anyone point me in the direction of a drag & drop plugin that works on android/ios?

...或者可以更新jqtouch插件的droppability，它已经在Andriod和IOS上运行。

...Or it might be possible to update the jqtouch plugin for droppability, it already runs on Andriod and IOS.

谢谢！

推荐答案

您可以使用Jquery UI拖放一个额外的库，将鼠标事件转换为触摸这是你需要的，我推荐的图书馆是 https://github.com/furf/jquery-ui-触摸式打击，你从Jquery UI拖放应该可以在触摸设备上工作

You can use the Jquery UI for drag and drop with an additional library that translates mouse events into touch which is what you need, the library I recommend is https://github.com/furf/jquery-ui-touch-punch, with this your drag and drop from Jquery UI should work on touch devises

或者你可以使用我正在使用的这个代码，它也是将鼠标事件转换为触摸，它就像魔法一样。

or you can use this code which I am using, it also converts mouse events into touch and it works like magic.

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（）函数

And in your document.ready just call the init() function

代码来自这里

这篇关于Javascript拖放触摸设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！