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

问题描述

我正在寻找一个拖拽&适用于触控设备的 DROP 插件.

我想要与 jQuery UI 插件类似的功能，它允许droppable"元素.>

jqtouch 插件支持拖拽，但不能拖拽.

这里是拖拽&仅支持 iPhone/iPad 的 drop.

谁能指出我拖拽的方向?可在 android/ios 上运行的 drop 插件?

...或者可以更新 jqtouch 插件以获得可删除性，它已经在 Andriod 和 IOS 上运行.

谢谢！

解决方案

您可以使用 Jquery UI 进行拖放操作，另外还有一个库可以将鼠标事件转换为您需要的触摸，我推荐的库是 https://github.com/furf/jquery-ui-touch-punch，用这个拖放来自 Jquery UI 应该适用于触摸设备

或者你可以使用我正在使用的这段代码，它还可以将鼠标事件转换为触摸，并且它的作用就像魔法一样.

function touchHandler(event) {var touch = event.changedTouches[0];var simulationEvent = document.createEvent("MouseEvent");模拟事件.initMouseEvent({触摸开始:鼠标按下"，触摸移动:鼠标移动"，触摸端:鼠标"}[event.type], true, true, window, 1,触摸屏X，触摸屏Y，touch.clientX, touch.clientY, false,假，假，假，0，空)；touch.target.dispatchEvent(simulatedEvent);event.preventDefault();}函数初始化(){document.addEventListener("touchstart", touchHandler, true);document.addEventListener("touchmove", touchHandler, true);document.addEventListener("touchend", touchHandler, true);document.addEventListener("touchcancel", touchHandler, true);}

在你的 document.ready 中调用 init() 函数

从此处

找到的代码

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

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

The jqtouch plugin supports dragging, but no dropping.

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

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

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

Thanks!

解决方案

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

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

code found from Here

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