我正在开发一个移动应用程序,我正在尝试将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); });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。