6

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

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

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

如您所见，可拖动功能最初被禁用，因为我想在点击事件后启用它。为了实现这一点，我目前正在使用以下代码：

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

这可行，但问题是需要一个“释放并再次点击”事件才能拖动元素，而不是在点击事件之后直接拖动。这可能是某种事件干扰问题吗？我尝试过类似的事情，event.preventDefault()但我对 jQuery 事件的了解并不多，所以我不知道这是否应该有所作为。

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

4

2 回答 2

2

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

即看到Jquery-ui sortable 不适用于基于 Android 或 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);
});
于 2012-03-29T08:53:04.353 回答
2

虽然有点晚了 - 我通过跳过 taphold 插件并改用它来实现它。记得添加Touch Punch！

$('#whatever').on('touchstart', function (event) {
    var me = this;

    if (!me.touching) {
        if (me.touched) { clearTimeout(me.touched); };
        me.touched = setTimeout(function () {
            //console.log('taphold');

            //Prevent context menu on mobile (IOS/ANDROID)
            event.preventDefault();

            //Enable draggable
            $this.draggable('enable');

            //Set internal flag
            me.touching = true;

            //Add optional styling for user
            $(me).addClass('is-marked');

            //trigger touchstart again to enable draggable through touch punch
            $(me).trigger(event);

            //Choose preferred duration for taphold
        }, 500);
    }
}).on('touchend', function () {
    //console.log('touchend');
    this.touching = false;

    //Disable draggable to enable default behaviour
    $(this).draggable('disable');

    //Remove optional styling
    $(this).removeClass('is-marked');

    clearTimeout(this.touched);
}).on('touchmove', function () {
    //console.log('touchmove');

    clearTimeout(this.touched);
});
于 2017-08-24T14:21:01.160 回答