jQuery可选，但可以单击

I am using the jQuery UI Sortable plugin to of course allow my users to drag and drop elements in a list, on the list change I am firing an ajax call to save the ordered list.

我使用jQuery UI可排序插件允许我的用户在列表中拖放元素，在列表更改中，我启动ajax调用来保存有序列表。

However one user is complaining that it is quite hard to drag and drop when the list requires a scroll. So basically what I am attempting to do is instead of the hold left click to drag and then release left click to drop.

然而，一位用户抱怨说，当列表需要滚动时，就很难拖放。所以基本上我要做的是取代按住鼠标左键拖动然后释放鼠标左键。

You will just left click on the element and it will become the active "drag" element and the user can move their mouse around the screen and it will follow, then on the second left click deactivate "drop" the element.

你只需要点击这个元素，它就会变成主动的“拖动”元素，用户可以在屏幕上移动他们的鼠标，然后它会跟随，然后在第二个左键关闭“删除”元素。

I have looked at their documentation, but I can't seem to find anything that will help me out (http://api.jqueryui.com/sortable/). Does anyone have any ideas or plugins that achieve this?

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

Regards

问候

1 个解决方案

#1

This should help you with this: 'You will just left click on the element and it will become the active "drag" element and the user can move their mouse around the screen and it will follow, then on the second left click deactivate "drop" the element.'

这应该会对您有所帮助:‘您只需左键单击元素，它将成为活动的“拖动”元素，用户可以在屏幕上移动鼠标，它就会跟随，然后在第二个左键上单击“删除”元素。

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 example: http://codepen.io/xszaboj/pen/JWbzax

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

I hope that is what you need.

我希望这就是你需要的。

Side note. This won't work on touch screen monitors on chrome because of different events which are fired.

边注。由于不同的事件被触发，这将不会在chrome的触摸屏上运行。

#1