jquery-ui - 结合 jQuery Mobile taphold 和 jQuery UI draggable

Question

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

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

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

正如您所看到的，可拖动功能最初是禁用的，因为我想在 taphold 事件之后启用它。为了实现这一点，我目前正在使用以下代码:

// 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 事件的了解并不多，所以我不知道这是否应该有所作为。

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

Answer 1

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

IE。见 Jquery-ui sortable doesn't work on touch devices based on Android or IOS

接下来我会说 touchstart 事件没有通过，因为在 jquery mobile 中是如何实现 taphold 的。

仅当它获得 touchstart/mousedown 事件时才会启动可拖动对象。

我以前见过类似的东西，但双击与可拖动结合使用。

您可能需要在 taphold 事件处理程序中手动触发 touchstart 事件，以便可拖动对象启动:

$('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);
});