jQuery Sortable - 删除拖动时的默认行为，放置后恢复

Question

我有一个图片网格，我希望能够拖放它们进行排序。 sortable() 效果很好。需要注意的是，我还运行了 jQuery Fancybox 插件 http://fancybox.net ，这将打开一个更大的单击时的图像视图。

所以你可以点击开始拖动，但是一旦你放下，fancybox就会被触发并且图像会放大。

我已经尝试过类似的事情，但事情真的变得一团糟（拖动根本不再起作用，我的列表在整个页面上重新排列，这很糟糕）：

$('#list').sortable({
  start:function(e,ui) {
    e.preventDefault();
  }
});

尝试使用 start 和 <代码>停止但没有运气。我还尝试解除项目的 click 处理程序的绑定，但这也没有帮助。理想情况下，我可以在拖动时“隐藏” fancybox 处理程序，然后在放下后恢复它们。可能有一种方法可以在拖动时取消整个列表的 Fancybox，然后再次调用 $.fancybox() 来启动它，但必须有一种更简单的方法...

感谢您的帮助！

Answer 1

好吧，我成功了！我确信下面的 kwicher 可以工作，但我必须稍微调整一下。我最终不得不在 fancybox 回调和可排序回调之间来回交换：

$('#list').sortable({
  start:function(e,ui) {
    ui.item.addClass('drag_sort');
  }
});

$('#list').fancybox({
  onStart:function(items,index,opts) {
    var obj = $(items[index]).parent()
    if (obj.hasClass('drag_sort')) {
      obj.removeClass('drag_sort');
      return false;
    }
  }
});

将 removeClass() 放在可排序的 stop 回调中不起作用：显然sortable stop 在 fancybox onStart 之前触发，因此当 fancybox 去查看时，类已经消失了。

请注意，sortable 直接针对列表中的

，但 fancybox 的目标是列表项内的 。这就是为什么我必须在 fancybox 的 onStart 中获取 parent() 。哦，只需在 onStart 中返回 false 就足以让 fancybox 忽略该点击！

Answer 2

我用一个相当低技术含量的项目方法解决了这个问题。在 start 内部，我会标记一些内容，表示当前单击与拖动相关，应该被忽略。

然后，在正常单击事件触发的代码中，我将检查当前单击是否被标记为用于拖动。超低技术示例：

var clickIsForDragging = false;

$('#list li').click(function() {
  // Ignore dragging clicks
  if (clickIsForDragging) { 
    clickIsForDragging = false;
    return; 
  } 

  // Perform whatever normal click action 
});

$('#list').sortable({
  start:function(e,ui) {
    e.preventDefault();
    clickIsForDragging = true;
  }
});

显然，使用全局变量并不理想，但这演示了这个概念。我想知道是否可以将单击事件的某些属性标记为拖动单击。也许我稍后会做一些摆弄，然后看看。

我还在 Stack Overflow 上看到了另一篇文章，该文章处理了类似的问题并使用了解除绑定和重新绑定：
jQuery UI可排序 -- 如何取消拖动/排序的项目上的点击事件？

Answer 3

我还没有测试过它，但原则上应该可行：

$('#list').sortable({
 start:function(e,ui) {
 //e.preventDefault(); - I am not sure that would be necessary
 $('#list li').addClass('drag_sort');
}
stop:function(){
      $('#list li').removeClass('drag_sort');
}
});


$('#list li').fancybox({
 onStart:function(){
  if($(this).hasClass('drag_sort')){
   $.fancybox.cancel();
  }
 }
});

你可以尝试一下。

K