jQuery Sortable - 刪除拖動時的默認行爲，拖放後恢復

我有一張圖片網格，我希望能夠拖放/排序。 sortable（）很好。需要注意的是，我還運行了jQuery Fancybox插件http://fancybox.net，它可以在點擊時打開圖片的更大視圖。jQuery Sortable - 刪除拖動時的默認行爲，拖放後恢復

所以你可以點擊開始拖動，但只要你放下fancybox觸發和圖像放大。

我已經試過這樣的事情，但事情變得真的搞砸了（拖完全不工作了，我的名單被遍佈頁面重排，這是骯髒的）：

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

試圖與start和stop，但沒有運氣。我也嘗試瞭解綁定物品的click處理程序，但這也沒有幫助。理想情況下，我可以在拖動時「隱藏」fancybox處理程序，然後在放下後恢復它們。有可能有一種方法來解鎖整個列表，同時拖動，然後再次撥打電話$.fancybox()啓動它，但有一個更簡單的方法...

感謝您的幫助！

來源

2011-05-27 Rob Cameron

好吧，我明白了！我確信kwicher的下面會工作，但我不得不稍微調整一下。我最後不得不換來回的fancybox回調和排序回調之間：

在stop回調排序的把removeClass()是行不通的：在之前的fancybox顯然排序stop火災onStart等在fancybox去看的時候，這個班已經過去了。

請注意，可排序的目標是直接在列表中排除<li>，但fancybox的目標是列表項目內的<a>。這就是爲什麼我必須得到parent() fancybox的onStart。哦，只要在onStart就足以讓fancybox忽略那個點擊！

來源

2011-06-02 16:53:43

我用一種相當低技術的方法解決了這個問題。開始時我會標記一些內容，說明當前點擊與拖動有關，應該被忽略。

然後在觸發正常點擊事件的代碼中，我會檢查當前點擊是否標記爲拖動。超級低技術示例：

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

顯然，使用全局變量並不理想，但是在此證明了這個概念。我想知道是否點擊事件的某些屬性可以標記爲說它是一個拖動點擊。也許我稍後會做一些擺弄，看看。

我也看到堆棧溢出在另一個帖子裏查處了類似的問題，並用於解除綁定並重新綁定： jQuery UI Sortable -- How can I cancel the click event on an item that's dragged/sorted?

來源

2011-05-27 19:39:31

我沒有測試它尚未但原則上應該工作：

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

你可以試試看。

來源

2011-05-28 14:40:05 kwicher

這幾乎奏效了......看到我下面的最終代碼。你讓我走上正軌！ – 2011-06-02 16:55:51

jQuery Sortable - 刪除拖動時的默認行爲，拖放後恢復

回答

相關問題