jQuery Sortable —拖动时删除默认行为，放下后恢复

如何解决jQuery Sortable —拖动时删除默认行为，放下后恢复

|| 我有一个图片网格，我希望可以拖放该图片进行排序。 sortable（）很好用。需要注意的是，我还运行了jQuery Fancybox插件http://fancybox.net，单击该插件将打开图像的较大视图。 因此，您可以单击以开始拖动，但是一旦放下，fancybox就会被触发并且图像放大。 我已经尝试过类似的操作，但是事情真的搞砸了（拖动不再起作用，我的列表在页面上重新排列，很讨厌）：

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

尝试过

start

和

stop

，但没有运气。我也尝试解除对项目的

click

处理程序的绑定，但这也无济于事。理想情况下，我可以在拖动时“隐藏” fancybox处理程序，然后在放下后恢复它们。可能有一种方法可以在拖动时取消整个列表的花式框，然后再次调用

$.fancybox()

进行启动，但是有一种更简单的方法... 谢谢你的帮助！     

解决方法

        好吧，我知道了！我确定下面的kwicher \可以正常工作，但是我不得不对其进行一些调整。我最终不得不在fancybox回调和sortable回调之间来回交换：

$(\'#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

回调中是行不通的：显然，sortable

stop

在fancybox

onStart

之前触发，因此类在fancybox出现时就消失了。 请注意，sortable直接针对列表中的

<li>

，而fancybox则针对列表项中的

<a>

。这就是为什么我必须在fancybox的

onStart

中得到ѭ12的原因。哦，只要将ѭ9中的ѭ14移到足以让fancybox忽略该点击！     ,        我用技术含量较低的项目解决了这个问题。在开始过程中，我会标记一些内容，说当前的点击与拖动有关，应将其忽略。 然后，在为正常点击事件触发的代码中，我将检查是否将当前点击标记为拖动。超低技术示例：

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

显然，使用全局变量不是理想的选择，但是这证明了这一概念。我想知道click事件的某些属性是否可以标记为说它是一次拖动单击。也许以后我会摆弄些东西看看。 我还在堆栈溢出上看到了另一篇文章，该文章处理了类似的问题，并使用了取消绑定和重新绑定： jQuery UI Sortable-如何取消已拖动/排序项目的click事件？     ,        我尚未测试过，但原则上应该可以：

$(\'#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();
  }
 }
});

您可以尝试一下。 ķ