可拖曳和排序元素jquery

我遇到了可排序列表的問題。所有列表都有幾個可排序的孩子。所有的孩子也應該是可拖動的，這樣我可以從一個列表中刪除一個孩子到另一個列表。當我同時使用可排序和可拖動時，它們相互覆蓋，其中一個被忽略。可拖曳和排序元素jquery

現在我得到了以下jQuery代碼。我還創建了一個說明我的問題的jsFiddle。

// Set sortable to categories 
$('.trade-in-template').sortable(); 
$('.trade-in-category-sub').sortable(); 
$('.trade-in-category-sub').children().draggable(); 

$(".trade-in-category").droppable({ 
    drop: function(event, ui) { 
     var dragged = $(ui.draggable); 
     var droppedOn = $(this); 

     if (dragged.hasClass('trade-in-row')) 
     { 
      dragged.css('left', 0); 
      dragged.css('top', 0); 
      droppedOn.find('.trade-in-category-sub').append(dragged); 
     } 
    } 
});

http://jsfiddle.net/a6Ftd/

來源

2013-06-12 hgerdin

它看起來像你重複'排序'功能與手動'draggable'和'droppable'功能。使用'connectWith'將'.trade-in-template''sortable'連接到'.trade-in-category'元素。 –

但是，我應該如何添加功能，以便所有.trade-in-row可以在所有.trade-in-category之間放置並在其中排序？ – hgerdin

現在，一些示例HTML標記應該非常有用。 –

顯然，你的問題不是一個JavaScript問題，而是一個CSS問題。我有updated your jsFiddle here。我已經註釋過你的draggable和droppable聲明，就像我說的那樣，它有點多餘。我用sortable聲明中的connectWith替代了該聲明。

但即使如此，它也無法正常工作，因爲您的將您的.trade-in-row元素左移。

阻止丟棄的原因是因爲在CSS中浮動元素將其從CSS盒模型流（或佈局，無論您想要調用它）中移除。結果，父母.trade-in-category-sub元素崩潰爲0px高度。在0px的高度，你沒有空間讓你的排序進入。

爲什麼它適用於當前可排序而不適用於連接的排序，可能已經是jQuery UI代碼領域了，具體到它的實現。如果我錯了，有人可能想糾正我。

爲了測試這個，我在代碼中添加了CSS樣式，清楚標記了相關元素的邊界。

.trade-in-category-sub { 
    border:1px solid red; 
} 

.trade-in-category-sub div { 
    background:rgba(50,100,255,.5) !important; 
}

而且我還刪除您的花車：

.trade-in-row { 
    width: 95%; 
    padding: 10px 0px 10px 5%; 
    border-bottom: 1px solid #CCC; 
    border-left: 1px solid #CCC; 
    /*float:left;*/ /* ### <------------------------------------- */ 
    cursor: -webkit-grab; 
}

只是取消註釋，以明白我的意思。 :)

來源

2013-06-12 12:54:45

非常感謝！ :) – hgerdin

我認爲你可以使用這裏nestedSortable。

注意：雖然它不再被維護，但我們已經使用了它1年，事實證明它工作得很好。配置選項與可排序的和可拖動的非常相似。

來源

2013-06-12 12:09:34 vcarel

可拖曳和排序元素jquery

回答

相關問題