JQuery UI Draggable on long press 适用于 mousedown 但不适用于 touchstart

Posted 2023-05-08

【中文标题】JQuery UI Draggable on long press 适用于 mousedown 但不适用于 touchstart

【英文标题】：JQuery UI Draggable on long press works with mousedown but not touchstart

【发布时间】：2017-11-04 04:14:54

【问题描述】：

以下内容在桌面 (mousedown) 上运行良好，但如果您在移动设备 (touchstart) 上尝试，它不会拖动。

var t;
$(document).on('touchstart mousedown','.menu-item', function (event) 
  var self = this;
  if ($(self).hasClass('draggable')) return;
  t = setTimeout(function () 
    $(self).draggable(
      revert: true,
      appendTo: 'body'
    ).draggable('enable').addClass('draggable');
    $(self).trigger(event)
  , 800);
);

$(document).on("touchend mouseup", function () 
  clearTimeout(t);
  $('.draggable').draggable( 'disable' ).removeClass('draggable');
);

.menu-item 
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  margin: 5px;

.menu-item.draggable 
  background-color: orange;
  transform: scale(1.1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="menu-item">1</div>
<div class="menu-item">2</div>
<div class="menu-item">3</div>

我怎样才能让它同时工作？

【问题讨论】：

您可能想使用 TouchPunch。

看这里：touchpunch.furf.com

是的，它似乎确实适用于 Touchpunch。谢谢。

很高兴听到它有效，也可以查看$(self).trigger(event)，文档建议这应该是 jQuery.Event 对象。可能需要$(self).trigger(event.type); 代替...不确定。

【参考方案1】：

将 jquerymobile 替换为 touchpunch 解决了问题，无需更改代码。