JavaScript的移动拖放 [英] JavaScript Mobile Drag and Drop

问题描述

我测试了我使用jQuery UI可拖动，可弃和排序建成并注意到拖放不会在手机浏览器运行的接口。我想有在事件在移动浏览器开了不同的方式。

I was testing out an interface I built using jQuery UI draggable, droppable and sortable and noticed that the drag and drop doesn't work in the mobile browser. I suppose there is a different way in which events are fired in the mobile browser.

是否有任何JavaScript框架然而，在手机浏览器，支持拖放？

Are there any JavaScript frameworks yet, that support drag and drop in the mobile browser?

如果没有，就一个人如何能去组建一些基本的拖/放功能的任何想法？

If not, any ideas on how one could go about putting together some basic drag/drop functionality?

推荐答案

一个棘手的一个......我想你已经pretty多强调了问题：触摸事件不与jQuery的拖/放集成然而功能，我不知道是否有拖/放库在那里针对移动设备的范围。

A tricky one...I think you've pretty much highlighted the problem: the touch events aren't integrated with the jQuery drag/drop functionality yet, and I'm not sure if there are drag/drop libraries out there targeting the mobile device range.

我可以说的是，你的可以的开始挖掘这些事件的事情，但我不知道，如果你愿意写所有的自己。简单来说，检查移动装置，然后安装的事件可以这样来实现：

What I can say is that you can start tapping into those events yourself, but I'm not sure if you're willing to write all that yourself. In simple terms, checking for a mobile device and then attaching the events could be achieved like this:

if (navigator.userAgent.match(/iphone/i) ||
    navigator.userAgent.match(/ipad/i) ||
    navigator.userAgent.match(/ipod/i) ||
    navigator.userAgent.match(/android/i))
{
    var element = $('#your_draggable_element_id');
    element.bind('touchstart', touchStartFunctionHere);
    element.bind('touchmove', touchMoveFunctionHere);
    element.bind('touchend', touchEndFunctionHere);
}

这会修补你进入的事件，这将使你控制你做了什么其次。你明明想的拖拽移动，触摸等的位置，你可以得到那些从事件本身。例如，基于上述code：

That would patch you into the events, which would give you control over what you did next. You'd obviously want the locations of drag moves, touches, etc., and you can get those from the event itself. For example, based on the above code:

function touchMoveFunctionHere(event)
{
    event.preventDefault();
    var x = event.originalEvent.touches[0].pageX;
    var y = event.originalEvent.touches[0].pageY;

    ...

}

不是你要找的人，我希望别人能阐明为移动设备拖/放框架一些光，但它是一个开始的完整解决方案！希望这有助于！

Not the complete solution you were looking for, and I hope someone else can shed some light on drag/drop frameworks for mobile devices, but it's a start! Hope this helps!

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