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

发布时间:2020-08-11 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了jquery-ui – 结合jQuery Mobile taphold和jQuery UI draggable编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在开发一个移动应用程序,我正在尝试将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事件的了解并不多,所以我不知道这是否应该有所不同.

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

解决方法

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

即见Jquery-ui sortable doesn’t work on touch devices based on Android or IOS

接下来我会说触摸启动事件没有流过,因为在jquery mobile中实现了taphold.

只有在获得touchstart / mousedown事件时才会启动可拖动.

我以前见过类似的东西,但是有一个双重打击和一个可拖动的.

您可能需要在taphold事件处理程序中手动触发touchstart事件以使draggable启动:

$('div.rect',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-ui – 结合jQuery Mobile taphold和jQuery UI draggable全部内容,希望文章能够帮你解决jquery-ui – 结合jQuery Mobile taphold和jQuery UI draggable所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!