JQuery Sortable - 對絕對定位的元素和佔位符進行排序

經過與這個問題的鬥爭和鬥爭後，我別無選擇，只能尋求幫助！我的情況是這樣的：我有一些絕對定位元素。每個元素都有自己的屬性「top」和「left」。我遇到的巨大問題是當我嘗試對項目進行排序時。JQuery Sortable - 對絕對定位的元素和佔位符進行排序

$(".container").sortable({ 
    containment: ".container", 
    cursor: 'move', 
    items: '.element', 
    helper: 'clone', 
    placeholder: 'new-placeholder', 
    forcePlaceholderSize: true, 
    tolerance: 'pointer', 
    revert: true, 
    scroll: false, 
    start: function(event, ui) { 
     event.stopPropagation(); 
     $(".new-placeholder").css("left", ui.helper.position().left); 
     $(".new-placeholder").css("top", ui.helper.position().top); 
     $(".new-placeholder").css("height", ui.helper.height()); 
     $(".new-placeholder").css("width", ui.helper.width()); 
    }, 
    change: function(event, ui) { 
     console.log("Placeholder index: " + ui.placeholder.index()); 
    } 
}).disableSelection();

這是Current Behavior，這是Expected behavior

正如你所看到的，這些元素應該改變自己的立場，當拖動的元素是超過。有沒有更好的方法來做到這一點？我無法擺脫絕對的位置，這是主要問題。我知道解決方案必須在更改，更新和停止方法上，但我無法自己弄清楚。

到目前爲止，我所得到的只是在項目被拖拽到另一個元素上時獲取佔位符的新索引，但是¿我怎樣才能改變佔位符的位置並根據該元素對其餘元素進行排序？

來源

2012-12-26 Federico Leon

我也用絕對定位的元素。我永遠無法使它與排序工作。我必須爲我的可排序對象創建一個新的佈局管理器，以便它能夠和原始絕對定位的佈局一樣（實際上比其更好）。 –

@ greg-pettit謝謝你的回答！我仍然試圖讓它工作。你能給我一些方法的想法來實現你說的解決方案嗎？我應該擺脫排序嗎？據我所知，可排序的方法根本不適用於絕對位置。即使我使用相對位置，如果我使用JQuery設置頂部和左側屬性，排序後的結果就是一團糟。巨大的感謝提前！ –

這將是不切實際的複製所有的元素，但我自己的更新（以得到它的工作）的基本思路是這樣的：

從容器和「門戶刪除所有絕對定位「
每個可排序的容器都向左浮動，相對定位並具有底部填充。這種填充意味着即使是空容器也可以作爲目標
容器中的每個「portlet」都將寬度設置爲100％，並且還向左浮動並具有相對定位和底部邊距（以將其間隔開）。
使用「start」參數動態設置我的佔位符大小。我將佔位符大小限制爲350px高，但對於小於此大小的任何小部件，佔位符將等於portlet大小。
使用「connectWith」參數來鏈接容器。

基本HTML：

<div class="portletContainer"> <!-- floated left, has padding --> 

    <div class="portlet"> <!-- floated left, margin-bottom, 100% width --> 
    <div> some stuff </div> 
    </div> 

    <div class="portlet"> <!-- floated left, margin-bottom, 100% width --> 
    <div> some more stuff </div> 
    </div> 

</div> 

<div class="portletContainer"> 
    <!-- repeat the above pattern; the two containers are then linked --> 
</div>

基本可排序的JavaScript：

$('.portletContainer').sortable({ 
    connectWith: ".portletContainer", 
    start: function(e, ui) { 
    var elementHeight = ui.item.height(); 
    if(elementHeight < 350) { 
     ui.placeholder.height(elementHeight); 
    } 
    } 
});

如果仍然不能爲你工作'S，有些事情可能只是被忽略。無論是繼承絕對定位還是JavaScript正在添加它。我認爲這涵蓋了所有的基礎，但更簡短的版本是：我剝離了它，直到我的標記和CSS類似於jQuery UI Sortable Demo頁面中「portlet」示例中的標記和CSS。

來源

2013-01-17 17:32:16

這正是我需要的方法。我肯定需要改變我的HTML結構才能做到這一點。 –

你有工作了。那是在工作嗎？ – Ramesh

Sortable正在使用我的代碼，是的。 –

有兩種方法可以實現這一點。你可以在nth-child或nth-type-of選擇器中使用一些CSS技巧來將絕對定位應用於索引，而不是直接應用於元素。因此，由於可排序插件的工作原理，當項目在DOM樹中轉移時，它們將捕獲正確的位置屬性，因爲索引將保持不變。

另一種方法是使用插件的sortchange事件，該事件只要您的列表中的項目順序發生更改就會觸發。因此，在事件功能中，您需要遍歷項目並重新應用正確的定位。

檢查here有關如何使用這兩種方法的詳細信息：

來源

2014-01-10 14:30:50 NiGhTTraX

JQuery Sortable - 對絕對定位的元素和佔位符進行排序

回答

相關問題