jQuery 可排序但点击即可工作

Question

我使用 jQuery UI Sortable 插件当然允许我的用户在列表中拖放元素，在列表更改时我正在触发 ajax 调用以保存有序列表。

但是，一位用户抱怨说，当列表需要滚动时，拖放非常困难。所以基本上我想要做的是而不是按住左键单击拖动然后释放左键单击放下。

您只需左键单击元素，它将成为活动的“拖动”元素，用户可以在屏幕上移动鼠标，它会跟随，然后在第二次左键单击禁用“拖放”元素。

我查看了他们的文档，但似乎找不到任何可以帮助我的东西 (http://api.jqueryui.com/sortable/)。有没有人有任何想法或插件可以实现这一点？

问候

Answer 1

这应该可以帮助您： '您只需左键单击元素，它将成为活动的“拖动”元素，用户可以在屏幕上移动鼠标，它会跟随，然后在第二次左键单击停用“拖放”元素。'

HTML：

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>

Javascript：

$( function() {
  var dragging = false;

    $("#draggable").draggable();
  $("#draggable").mouseup(function(e){
    if(!dragging){
      dragging = true;
      e.preventDefault();
      return false;
    }
    else{
      dragging = false;
    }
  })
  } );

Codepen 示例： http://codepen.io/xszaboj/pen/JWbzax

我希望这是你需要的。

旁注。由于触发了不同的事件，这不适用于 chrome 上的触摸屏显示器。