Заполнитель сортируемого JQuery-ui застрял вверху ⇐ Jquery

[Anonymous]

У меня проблема с заполнителем jquery-ui sortable.
Я пытаюсь отсортировать коллекцию div и добавить заполнитель того места, куда он ее поместит.
В настоящее время кажется, что заполнитель «застрял» вверху. Возможно, это мой CSS, но я не могу понять, в чем проблема.
Я пытаюсь сделать это, как в примере из jquery ui
Демо

Код: Выделить всё

$(function() {
$('#sortable').sortable({
placeholder: 'ui-state-highlight',
}).disableSelection();
});

Код: Выделить всё

.form_elements {
width: 100%;
}

.form_elements ._element {
width: 100%;
display: block;
}

.form_elements ._element ._tu {
float: left;
width: 80px;
}

.form_elements ._element ._tu input[type=checkbox] {
scale: 0.8;
border-color: var(--bs-gray-500);
float: left;
}

.form_elements ._element ._tu .number {
float: right;
padding-right: 15px;
color: #6e6e6e;
}

.form_elements ._element ._elementContent {
width: calc(100% - 80px);
min-height: 10px;
background-color: #fff;
border: 1px solid #eaedf0;
margin-bottom: 15px;
float: left;
padding: 10px;
}

.form_elements ._element ._elementContent .line {
width: 100%;
}

.form_elements ._element ._elementContent .line.lh16 {
line-height: 18px;
}

.form_elements ._element ._elementContent .line .icon {
float: left;
color: #6e6e6e;
padding-right: 5px;
}

.form_elements ._element ._elementContent .line .icon i {
font-size: 18px;
}

.form_elements ._element ._elementContent .line .title {
float: left;
color: #6e6e6e;
font-size: 16px;
}

.form_elements ._element ._elementContent .line .rs {
float: right;
display: none;
}

.form_elements ._element ._elementContent .line .rs .settings {
float: left;
margin-right: 10px;
font-size: 18px;
cursor: pointer;
}

.form_elements ._element ._elementContent .line .rs .clone {
float: left;
margin-right: 10px;
font-size: 18px;
cursor: pointer;
}

.form_elements ._element ._elementContent .line .rs .move {
float: left;
font-size: 18px;
cursor: pointer;
}

.form_elements ._element ._elementContent:hover .rs {
display: block !important;
}

.ui-state-highlight {
height: 50px;
/* Adjust to match the height of your items */
margin: 5px 0;
/* Make sure to give some space to see where it will be dropped */
border: 2px dashed #ccc;
/* To visually distinguish the placeholder */
background-color: rgba(240, 240, 240, 0.5);
box-sizing:  border-box;
}

Код: Выделить всё

[i]
2.




[/i]

Number


[i][/i]

[i][/i]

[i][/i]







[i]
3.




[/i]

Number


[i][/i]

[i][/i]

[i][/i]







[i]
4.




[/i]

Text


[i][/i]

[i][/i]

[i][/i]







[i]
1.




[/i]

Text


[i][/i]

[i][/i]

[i][/i]

Подробнее здесь: https://stackoverflow.com/questions/790 ... at-the-top