结合jQuery Mobile Taphold和jQuery UI Draggable [英] Combining jQuery Mobile taphold and jQuery UI draggable

问题描述

我正在开发一个移动应用程序，试图将jQuery UI的可拖动功能与jQuery Mobile的taphold事件结合起来.这个想法是当执行Taphold时元素可以拖动.

I'm working on a mobile application where I'm trying to combine jQuery UI's draggable functionality with jQuery Mobile's taphold event. The idea is that an element becomes draggable when a taphold is executed.

Draggable正在以下代码中的元素上初始化:

Draggable is being initialized on elements in the following code:

$('div.rect', '#outerBox').draggable({
    containment: "parent", 
    grid: [50, 50],
    disabled: true,
    stop: function(event, ui) {
        $(this).draggable('disable');
        $(this).removeClass('highlighted');
    }
}); 

如您所见，可拖动功能最初被禁用，因为我想在taphold事件之后启用它.为此，我目前使用以下代码:

As you can see the draggable functionality is disabled initially, because I want to enable it after a taphold event. To achieve this I'm currently using the following code:

// Bind long press event to rectangle elements
$('div.rect', '#outerBox').bind('taphold', function(event, ui) {
    // Enable dragging on long press
    $(this).addClass('highlighted');
    $(this).draggable('enable');
}); 

这有效，但是问题是需要'释放并再次点击'事件来拖动元素，而不是在taphold事件之后直接拖动. 这可能是某种事件干扰问题吗?我已经尝试过event.preventDefault()之类的事情，但是我对jQuery事件的了解并不多，所以我不知道这是否应该有所作为.

This works, but the problem is that a 'release-and-tap-again'-event is needed in order to drag the element around, instead of dragging directly after the taphold event. Could this be some kind of event-interference problem? I've tried things like event.preventDefault() but my knowledge of jQuery events isn't much so I have no idea whether or not this should make any difference.

关于如何解决这个问题的任何想法?

Any idea on how to solve this one?

推荐答案

首先，jquery ui draggable不适用于触摸事件.我假设您已经进行了必要的调整以解决此问题.

First, jquery ui draggable does not work with touch events. I'm assuming you've made the nessesary adjustments to fix this.

即参见 Jquery-ui sortable不在基于Android或IOS的触摸设备上无法使用

接下来，我要说的是touchstart事件没有流过，因为在jquery mobile中实现了taphold的方式.

Next I would say the touchstart event is not flowing through because of how taphold has been implemented in jquery mobile.

可拖动对象只有在发生touchstart/mousedown事件时才会启动.

The draggable will only be initiated if it gets a touchstart/mousedown event.

我以前见过类似的东西，但是连按两次并拖动了鼠标.

I've seen something similar before, but with a doubletap in conjunction with a draggable.

您可能需要在Taphold事件处理程序中手动触发touchstart事件，以使可拖动对象插入:

You may need to manually trigger the touchstart event inside your taphold event handler for the draggable to kick in:

$('div.rect', '#outerBox').bind('taphold', function(event, ui) {
    var offset = $(this).offset();
    var type   = $.mobile.touchEnabled ? 'touchstart' : 'mousedown';
    var newevent = $.Event(type);
    newevent.which  = 1;
    newevent.target = this;
    newevent.pageX  = event.pageX ? event.pageX : offset.left;
    newevent.pageY  = event.pageY ? event.pageX : offset.top;

    $(this).trigger(newevent);
});

这篇关于结合jQuery Mobile Taphold和jQuery UI Draggable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！