jquery - 如何使 jquery 可排序项目仅在单击项目后才可拖动？

Question

我有一个可排序的菜单工作正常，但我在每个可排序的项目上也有一个点击事件，现在如果拖动并排序菜单，点击事件会同时触发，我想要的是只能在我点击后拖动可排序的项目它，有点像只能拖动活动项目。

我怎样才能做到这一点？

Answer 1

您需要在点击事件触发后启用拖动：

$('#target').click(function() {
  $('#target').draggable();
});

Answer 2

几个想法：

除非给定元素是“选定”元素，否则取消拖动：

(function() {
  var selectedTarget = null;
  $('.target').draggable({ drag: function(event, ui) { 
    if(this != selectedTarget) return false; 
  });
  $('.target').click(function() { selectedTarget = this; });
});

稍微延迟拖动开始（有足够的时间让点击事件传播）：

(function() {
  $( ".target" ).draggable({ delay: 500 });
});

这两个工作的基础是所有可排序的对象都具有target类