Вопрос или проблема
У меня проблема с плейсхолдером в sortable jQuery UI.
Я пытаюсь отсортировать коллекцию 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;
/* Подстройте под высоту ваших элементов */
margin: 5px 0;
/* Обязательно оставьте пространство, чтобы видеть, где будет сброшено */
border: 2px dashed #ccc;
/* Чтобы визуально отличить плейсхолдер */
background-color: rgba(240, 240, 240, 0.5);
box-sizing: border-box;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"
integrity="sha256-J8ay84czFazJ9wcTuSDLpPmwpMXOm573OUtZHPQqpEU="
crossorigin="anonymous"></script>
<div class="form_elements ui-sortable" id="sortable">
<div class="_element" data-index="1">
<div class="_tu">
<input type="checkbox" class="form-check-input" />
<div class="number">2.</div>
</div>
<div class="_elementContent">
<div class="line lh16">
<div class="icon">
<i class="fa fa-hashtag"></i>
</div>
<div class="title">Число</div>
<div class="rs">
<div class="settings">
<i class="flaticon-clipboard"></i>
</div>
<div class="clone">
<i class="flaticon-background"></i>
</div>
<div class="move">
<i class="flaticon2-resize"></i>
</div>
</div>
</div>
</div>
</div>
<div class="_element" data-index="2">
<div class="_tu">
<input type="checkbox" class="form-check-input" />
<div class="number">3.</div>
</div>
<div class="_elementContent">
<div class="line lh16">
<div class="icon">
<i class="fa fa-hashtag"></i>
</div>
<div class="title">Число</div>
<div class="rs">
<div class="settings">
<i class="flaticon-clipboard"></i>
</div>
<div class="clone">
<i class="flaticon-background"></i>
</div>
<div class="move">
<i class="flaticon2-resize"></i>
</div>
</div>
</div>
</div>
</div>
<div class="_element" data-index="3">
<div class="_tu">
<input type="checkbox" class="form-check-input" />
<div class="number">4.</div>
</div>
<div class="_elementContent">
<div class="line lh16">
<div class="icon">
<i class="flaticon2-sort-alphabetically"></i>
</div>
<div class="title">Текст</div>
<div class="rs">
<div class="settings">
<i class="flaticon-clipboard"></i>
</div>
<div class="clone">
<i class="flaticon-background"></i>
</div>
<div class="move">
<i class="flaticon2-resize"></i>
</div>
</div>
</div>
</div>
</div>
<div class="_element" data-index="0" style="">
<div class="_tu">
<input type="checkbox" class="form-check-input" />
<div class="number">1.</div>
</div>
<div class="_elementContent">
<div class="line lh16">
<div class="icon">
<i class="flaticon2-sort-alphabetically"></i>
</div>
<div class="title">Текст</div>
<div class="rs">
<div class="settings">
<i class="flaticon-clipboard"></i>
</div>
<div class="clone">
<i class="flaticon-background"></i>
<div class="move">
<i class="flaticon2-resize"></i>
</div>
</div>
</div>
</div>
</div>
</div>Ответ или решение
Проблема с тем, что плейсхолдер jQuery UI Sortable «прилипает» к верхней части контейнера, может возникнуть из-за различных аспектов, включая стили CSS или настройки самого компонента Sortable. Вот несколько шагов, которые могут помочь устранить эту проблему.
1. Изменение CSS для плейсхолдера
Убедитесь, что у вас есть правильные стили для класса плейсхолдера (ui-state-highlight). Как вы уже указали в вашем примере CSS, у вас правильный стиль для высоты и отступов. Однако важно также учитывать отступы и границы у элементов контейнера, где располагаются сортируемые элементы.
Вы можете попробовать изменить стиль плейсхолдера следующим образом:
.ui-state-highlight {
height: 50px; /* Высота плейсхолдера */
margin: 5px 0; /* Отступ для визуального разделения */
border: 2px dashed #ccc; /* Стиль рамки */
background-color: rgba(240, 240, 240, 0.5); /* Фон плейсхолдера */
box-sizing: border-box; /* Учитывается отступ и граница */
}2. Проверьте настройки Sortable
Если у вас проблемы с отображением плейсхолдера, убедитесь, что настройка placeholder используется корректно. В вашем коде это выглядит правильно:
$(function() {
$('#sortable').sortable({
placeholder: 'ui-state-highlight',
}).disableSelection();
});3. Структура HTML
Проверьте, что структура вашего HTML-кода корректна и элементы внутри контейнера сортируются должным образом. Каждый элемент должен быть корректно вложен в контейнер с id="sortable".
4. Убедитесь в отсутствии конфликтов CSS
Иногда стили других CSS-классов могут конфликтовать с вашим плейсхолдером. Проверьте, нет ли других стилей, которые могут влиять на отображение элементов.
5. Пример
Вот полный пример кода с использованием предложенных выше настроек и стилей для решения проблемы:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Sortable Placeholder Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
<style>
.form_elements {
width: 100%;
}
._element {
width: 100%;
margin-bottom: 15px;
background-color: #fff;
border: 1px solid #eaedf0;
padding: 10px;
box-sizing: border-box;
}
.ui-state-highlight {
height: 50px;
margin: 5px 0;
border: 2px dashed #ccc;
background-color: rgba(240, 240, 240, 0.5);
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="form_elements" id="sortable">
<div class="_element">Элемент 1</div>
<div class="_element">Элемент 2</div>
<div class="_element">Элемент 3</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
<script>
$(function() {
$('#sortable').sortable({
placeholder: 'ui-state-highlight',
}).disableSelection();
});
</script>
</body>
</html>Заключение
Следуя этим шагам, вы должны устранить проблему с «прилипанием» плейсхолдера в jQuery UI Sortable. Проверьте, чтобы все стили и скрипты загружались корректно, и рассмотрите возможность конфликтов стилей, которые могут мешать правильному отображению. Если проблема не решится, попробуйте также протестировать на чистом проекте, чтобы исключить влияние других библиотек или скриптов.