JQuery UI，將Sortable與Droppable相結合

Question

我正在嘗試將JQuery UI 可排序與droppable相結合，以創建多個頁面來刪除和排序事物。 我在這里設置了一個帶有獨立演示的博客條目：

http://whit.info/blog/2009/06/06/jquery-ui-combining-sortable-with-droppable/

這是一個jsFiddle：

http://jsfiddle.net/VUuyx/

請注意，您可以拖動以對框進行排序，甚至可以對其他列進行排序。 您也可以單擊頁面按鈕切換頁面。 我的問題在於結合這兩個特征：

通過使用droppable ，我允許用戶將一個框拖到頁面按鈕，然后頁面將切換，用戶可以完成將其拖動到新顯示的頁面上。 問題是當頁面切換時，顯示在拖動框下面的第一列沒有它超過事件觸發。 您必須拖動到另一列，然后返回到第一列以顯示占位符。

我不確定，但我想我需要以某種方式清除事件，或手動觸發它們。 問題似乎源於這樣一個事實，即拖動的盒子在可見時位於柱子上方。

你能幫助解決這個深奧的困境嗎？

謝謝！

更新：

所以我一直在考慮可能的工作。 Michal建議啟動刷新方法，這確實無法解決問題，但讓我思考事件問題。

似乎當你離開然后再回來時，適當的事件就會發生。 也許如果我可以手動觸發第一列的mouseout事件，重置將允許mouseover事件正確觸發。

我試過這個：

$(".column:first").trigger('mouseout'); 

但我不認為這與可排序的事件是一樣的。 也許我應該解雇那個事件？

Answer 1

也許我誤解了這個問題，但我不認為它與“頁面切換”有任何關系。 如果您同時打開兩個頁面並嘗試將“Box 1”拖動到“Box 4”上方的位置，您將看到它不會觸發“Box 4”的Sortable已收到Draggable直到你去“Box 4” 下面 。 這並不能解決您的問題，但可能會幫助您尋找更好的解決方案。

請參閱http://jsfiddle.net/nkBNP/7/以獲取演示我的意思的JSFiddle。

Answer 2

至少對於自上而下的下降，我認為解決方案是將box類設置為draggable並將其鏈接到可排序對象。

$(".box").draggable({
    tolerance: 'point',
    connectToSortable: '.column',
    snap:false,
    helper : 'clone',
});

此示例創建了框的副本，但它允許我將框1拖到第2頁，然后慢慢將其拖到框5上方並放入頂部位置。 但它非常敏感。 您可能需要調整網格並捕捉以使其為臨時用戶一致地工作。

我當然可以想象一個可排序的對象不會期望從頂部下來的東西，因為它期望從容器內對事物進行排序。 另一方面，Droppable期望從任何方向進入。

Answer 3

Sortable有一個未記錄的選項refreshPositions ，當它們可以排序時，它會自動更新droppables的位置。 這可以防止占位符被刪除而不是實際的可放置。

Answer 4

是的，添加$（'。column'）。sortable（“refresh”）; show_page（id）函數的結束對我有用（僅在firefox minefield中測試過）：

function show_page(id) {
    $('.page').removeClass('page_active');
    $('#page_'+id).addClass('page_active');
    $('.column').sortable("refresh");
}

Answer 5

添加@edtechdev對tolerance: 'intersect的回答tolerance: 'intersect產生了我認為可能滿足你的東西，Whit：

$(".column").sortable({
    connectWith: '.column',
    opacity: 0.4,
    tolerance: 'intersect', //<--changed
    placeholder: 'place_holder',
    helper: function(event, el) {
        var myclone = el.clone();
        $('body').append(myclone);
        return myclone;
    },
}).disableSelection();

// ...

function show_page(id) {
    $('.page').removeClass('page_active');
    $('#page_'+id).addClass('page_active');
    $('#page_'+id).find('.column:first').sortable('refresh'); //<- added
}

Answer 6

查看使用jQuery和Asp.Net MVC構建的拖放門戶，它在博客文章中全部實現： http ： //lakkakula.wordpress.com/2009/06/15/web-2-0-portal-using-asp -net-MVC-微軟的AJAX客戶端模板，和jQuery的帶拖和拖放窗口小部件的個性化/