jquery-ui sortable：當使用多個可排序元素時被拖到後面的元素

我有一系列嵌套的可排序元素，表現出一些奇怪的行爲與z-indexes。jquery-ui sortable：當使用多個可排序元素時被拖到後面的元素

基本上，在某些情況下，元素會被拖拽到父容器中。它只在父元素被排序後出現。

它也看起來像後面的問題只是在列表中的元素。所以我可以拖動到「更高」的排序，但拖到「更低」排序，拖動元素突然後面。

詳細說明：

鑑於排序列表甲輪流A中的每個元素都包含一個連接排序列表乙（如在每個A的B列出全部連接）

在對A中的元素進行排序後，從列表中排序的元素現在位於其他A元素的後面。

我玩過各種Z-index選項，通過CSS和Jquery都無濟於事。

來源

2011-09-29 Toby Hede

我找到了解決此問題的解決方法。

在定義sortables，使用方法：

appendTo: "body" 
helper: "clone"

這打破了拖元素完全脫離嵌套排序Z排序，並解決問題。

來源

2011-10-02 02:37:35

請注意，您可能需要重新應用一些CSS樣式到輔助對象，因爲它可能會丟失從其父親繼承的樣式。 – ElBel

我知道這是一箇舊的線程，但我有一個稍微不同的解決方案。在將它放到body中之後，我的元素失去了它的所有CSS屬性。我的解決方法是創建我自己的自定義幫助器對象。

的Javascript：

appendTo: 'body',   
    helper: function(event, $item){ 
     var $helper = $('<ul class = "styled" id="' + event.originalEvent.target.id + '"><li>' + event.originalEvent.target.innerText + '</li></ul>'); 
     return $helper; 
    },

CSS

.styled li{ 
     margin-left: 0px; 
} 
.styled{ 
     cursor:move; 
     text-align:left; 
     margin-left: 0px; 
     padding: 5px; 
     font-size: 1.2em; 
     width: 390px; 
     border: 1px solid lightGrey; 
     background: #E6E6E6 url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat- 
     font-weight: normal; 
     color: #555; 
     list-style-type: none; 
}

來源

2012-06-14 16:37:07 Fermis

漂亮反應遲緩，但對於任何人在未來誰跟隨我發現，如果你是移動多個元素，可以覆蓋排序和stop用於設置元素的z-索引。例如：

sort: function(event, ui) { 
    $(this).css('z-index', 1000); 
}, 
stop: function(event, ui) { 
    $(this).css('z-index', 0); 
}

這將更新當前元素的Z-index屬性確保它總是在最前面。因此，您可以將此想法擴展到分組元素。想象一下：

sort: function(event, ui) { 
    $('.element-group').each(function(index) { 
     $(this).css('z-index', 1000); 
    }); 
}, 
stop: function(event, ui) { 
    $('.element-group').each(function(index) { 
     $(this).css('z-index', 0); 
    }); 
}

來源

2017-05-22 16:44:09

jquery-ui sortable：當使用多個可排序元素時被拖到後面的元素

回答

相關問題