jQuery可排序--拖动时删除默认行为，拖放后恢复

Question

我有一个图片网格，我希望能够通过拖放对其进行排序。sortable()非常好用。需要注意的是，我还运行了jQuery Fancybox插件http://fancybox.net，当单击它时，它会打开一个更大的图像视图。

因此，您可以单击以开始拖动，但一旦拖放，fancybox就会被触发，图像会放大。

我尝试过这样的方法，但事情变得非常混乱(拖拽根本不再起作用，我的列表在页面上被重新排列，这很糟糕)：

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

同时尝试了start和stop，但没有成功。我还尝试为这些项取消绑定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()放在sortable的stop回调中是行不通的:显然，可排序的stop在fancybox onStart之前触发，所以在fancybox查看时该类已经消失了。

请注意，可排序对象直接指向列表中的<li>，而fancybox则指向列表项中的<a>。这就是为什么我必须在fancybox的onStart中获取parent()。哦，简单地在onStart中输入return 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 Sortable -- How can I cancel the click event on an item that's dragged/sorted?

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