Question

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

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

我尝试过这样的事情，但事情变得非常糟糕（拖动根本不起作用，我的列表在整个页面重新排列，这很讨厌）：

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

尝试使用start和stop，但没有运气。我也尝试解除项目的click处理程序，但这也没有帮助。理想情况下，我可以在拖动时“隐藏”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回调中无法正常工作：显然可排序的stop会在fancybox onStart之前触发，因此课程已经过了时间fancybox去看了。

请注意，sortable可直接定位列表中的<li>，但fancybox会定位列表项中的<a>。这就是我必须在fancybox parent()中获得onStart的原因。哦，只需在return false中转onStart即可让fancybox忽略该点击！

Answer 2

我用一种相当低技术的方法解决了这个问题。在开始的内部，我会标记一些内容，说当前的点击与拖动有关，应该被忽略。

然后在为正常点击事件触发的代码中，我会检查当前点击是否标记为拖动。超低科技的例子：

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();
  }
 }
});

你可以尝试一下。

ķ

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

3 个答案: