сортируемый список влияет на другие элементы вокруг

Question

У меня есть два списка <ul> с <li> -tags. Пользователь должен иметь возможность перемещать их так, как они хотят; в первую или вторую ul и т. д.

Работает как задумано, за исключением того, что каждый раз, когда пользователь начинает перетаскивать, родительский элемент будет изменять его размер. Я не могу дать ему фиксированную высоту, потому что, если есть много <li> -tags, появится вторая строка элементов. Кроме того, если я скрою элемент из этого списка, элементы будут «вверх», в результате чего родительский элемент получит некоторую дополнительную высоту.

Мой сортировкой вызов:

$("#myItems, #clothingItems").sortable({ 
    start: function (event, ui) { //prevent dragged item from clicking 
     $(idname).addClass('noclick'); 
     $('#powerTip').hide(); 
    }, 
    zIndex: 100000, 
    appendTo: "body", 
    connectWith: "#myItems, #clothingItems", 
    containment: '#mainMenu', 
    drag: function (event) { 
     $('#powerTip').hide(); 
    }, 
    stop: function() { 
     $(idname).removeClass('noclick'); 
    } 
}); 

Существует также концертная версия: http://wernersbacher.de/music/#items

PS: Для того, чтобы скрыть элемент, нажмите на него и выберите "Sell выбранные элементы".

Answer 1

Похоже, что sortable автоматически добавляет новую строку перед вашими элементами при перетаскивании; пока ваши элементы отображаются как встроенные блоки, это приводит к указанной проблеме.

Я попытался изменить ваш .item_container к float: left; концепции (см дисплея, ширина и плывет свойство):

.item_container { 
    position: relative; 
    display: block; 
    width: 65px; 
    float: left; 
    cursor: pointer; 
    box-shadow: 0px 1px 4px -2px; 
    border-radius: 3px; 
    border: 1px solid rgba(0, 0, 0, 0.21); 
    margin-right: 10px; 
    margin-bottom: 11px; 
    margin-top: 1px; 
} 

и она работает без изменения высоты.

Теперь единственное, что нужно исправить: ul: его нужно растягивать, когда содержимое больше, чем оно. Поэтому я также добавил overflow: hidden; в #myItems, который решает эту проблему.

Answer 2

Ну вам просто нужно добавить одно свойство к классу .itemUL и изменить min-height и ваш класс будет выглядеть следующим образом:

.itemUL 
{ 
    display:flex //Add this 
    list-style-type: none; 
    padding: 9px 5px 0px 12px; 
    margin: 0; 
    margin-top: 10px; 
    min-height: 92px; //Change this 
    background: rgba(0, 0, 0, 0.09); 
} 

Update:

Незначительное JQuery трюк, чтобы настроить ваш рост:

if($(".itemUL").width()>727) 
{ 
    $(this).height($(this).height+92); 
} 

и ваш .itemUL будет иметь еще один пр. как указано ниже:

.itemUL { 
    display: flex; 
    flex-wrap: wrap; //Add this 
    list-style-type: none; 
    padding: 9px 5px 0px 12px; 
    margin: 0; 
    margin-top: 10px; 
    min-height: 92px; 
    background: rgba(0, 0, 0, 0.09); 
}