Добрый день. Подскажите любую идею или, если возможно, пример того, как реализовать динамическое создание подкатегории при сортировке элемента с помощью JQuery UI (Sortable). Я хотел бы добиться такого эффекта, чтобы при перетаскивании элемента dom ui.item
(во время сортировки), когда вы находили перетаскиваемый элемент над другим элементом в списке, для каждого элемента, в который вы можете переместить, была создана динамическая подкатегория. элемент (в html-разметке с сервомаркой ([class = "just-for-example"]) (но отображался только тот, над которым элемент в данный момент перемещается). (Уже реализованный, как я мог, с опустошением категория была удалена из разметки). Я примерно понимаю, что нужно сделать, я просто не могу определить, над каким элементом находится перетаскиваемый элемент.
(function () {
let category = '#menu-left > ul > li > ul';
let subCategory = '#menu-left > ul > li > ul > li > ul';
sortCategory();
sortSubCategory();
// sort categories
function sortCategory() {
$(category).sortable({
connectWith: subCategory,
placeholder: 'placeholder',
forcePlaceholderSize: true,
change: function(event, ui) {
//console.log('[CATEGORY]', ui.item);
},
receive: function (event, ui) { // if [SUB CATEGORY] is Empty, then remove it and label.
if (ui.sender && ui.sender.children().length === 0) {
ui.sender.siblings('a').remove(); // a.label
ui.sender.parent().remove(); // li [just-for-example]
ui.sender.remove(); // ul
}
},
start: function (event, ui) { // maybe create all items, hidden [SUB CATEGORY]
},
stop: function (event, ui) { // remove empty [SUB CATEGORIES]
}
});
}
// sort sub categories
function sortSubCategory() {
$(subCategory).sortable({
connectWith: category,
placeholder: 'placeholder',
forcePlaceholderSize: true,
});
}
// add item chanel
$(document).on('click', '#menu-left .btn-add', function (e) {
e.preventDefault();
let $ul = $(this).parents('a').siblings('ul');
$ul.append(`<li><a href="item item-custom-chanel">Chanel - ${$ul.children().length}</a></li>`);
});
$(document).on('click', '#menu-left a', function (e) {
e.preventDefault();
});
})();
* {margin: 0;padding: 0}
body{background-color: #DDD; height: 100vh; font-family: Arial;}
#menu-left{
position: relative;
max-width: 250px;
margin: 50px auto 0;
}
#menu-left ul {
list-style: none;
margin-left: 25px;
}
#menu-left li a {
display: block;
background-color: #FFF;
margin: 1px 0;
padding: 3px;
text-decoration: none;
color: #333;
user-select: none;
}
#menu-left .sub-category{
display: flex;
justify-content: space-between;
align-items: center;
}
#menu-left .placeholder{
border: dashed 1px darkgreen;
}
#menu-left .btn-add{
display: block;
padding: 1px 4px;
background-color: #CCC;
border-radius: 2px;
}
/* need */
#menu-left .just-for-example{
margin-bottom: 10px;
}
#menu-left .just-for-example a {
background-color: darkgrey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
<div id="menu-left">
<ul>
<li>
<a href="" class="label sub-category"><span>Sub Category</span><i class="btn-add">+</i></a>
<ul>
<!-- NEED AUTO GENERATE GROUP -->
<li class="just-for-example">
<a href="" class="label sub-category"><span>Sub Category</span><i class="btn-add">+</i></a>
<ul>
<li><a href="item item-custom-chanel">Chanel - 1</a></li>
<li><a href="item item-custom-chanel">Chanel - 2</a></li>
<li><a href="item item-custom-chanel">Chanel - 3</a></li>
</ul>
</li>
<!-- NEED AUTO GENERATE GROUP -->
<li><a href="item item-custom-chanel">Chanel - 4</a></li>
<li><a href="item item-custom-chanel">Chanel - 5</a></li>
<li><a href="item item-custom-chanel">Chanel - 6</a></li>
</ul>
</li>
</ul>
</div>
Серый цвет в разметке - пример того, чего вы хотели бы достичь при переносе ui.itum
над другим 1 элементом (переместиться над которым он расположен)