JavaScript拖放触摸设备

我正在寻找一款适用于触控设备的拖拽式DROP插件。

我希望类似于jQuery UI插件的功能，它允许“可拖拽”元素。

jqtouch插件支持拖动，但不会丢失。

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

任何人都可以在拖放插件的方向指向我的android / ios？

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

谢谢！

---

您可以使用Jquery用户界面进行拖放操作，并附带一个将鼠标事件转换为触摸的库，这是您需要的，我推荐的库是https://github.com/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（）函数

代码从这里找到

---

对于任何希望使用此功能并保持“点击”功能的人（正如John Landheer在他的评论中提到的那样），只需进行一些修改即可完成：

添加几个全局变量：

var clickms = 100;
var lastTouchDown = -1;

然后将switch语句从原始语句修改为：

var d = new Date();
switch(event.type)
{
    case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
    case "touchmove": type="mousemove"; lastTouchDown = -1; break;        
    case "touchend": if(lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms){lastTouchDown = -1; type="click"; break;} type="mouseup"; break;
    default: return;
}

您可能需要根据自己的口味调整'clickms'。 基本上它只是在观察一个'touchstart'，然后通过'touchend'来模拟点击。

---

感谢上面的代码！ - 我尝试了几个选项，这是票。 我有问题在preventDefault阻止在iPad上滚动 - 我现在正在测试可拖动的项目，迄今为止效果很好。

if (event.target.id == 'draggable_item' ) {
    event.preventDefault();
}

链接地址: http://www.djcxy.com/p/44747.html

上一篇: Javascript Drag and drop for touch devices

下一篇: Sencha Touch vs. jQtouch vs. GWT mobile vs. XUI vs. jQuery Mobile vs.