Суть вопроса, у меня есть список задач, он сортируется мне все нравиться. Осталось получить сортируемый массив списка, для того что бы передать его в php.
Проблема в том что не могу собрать мне нужный массив, когда в консоле смотрю, то вижу id самих задач и их нужно объединить в массив.
Для наглядности
сылка на codepen.
Самe сортировка повторил с ютуб урока)
HTML
<ul class="sortable-list">
<?php
$sql = mysqli_query($conn, "SELECT * FROM `task` ORDER BY sortable");
if (mysqli_num_rows($sql) > 0) :
while ($task = mysqli_fetch_assoc($sql)) : ?>
<li class="item" draggable="true" data-id="<?= $task['id']; ?>">
<div class="task" data-id="<?= $task['id']; ?>">
<div class="content">
<input type="text" class="text" id="task-text" data-id="<?= $task['id']; ?>"
value="<?= $task['title']; ?>" readonly>
<span class="material-symbols-outlined drag">drag_indicator</span>
</div>
<div class="action-button">
<button class="edit" data-id="<?= $task['id']; ?>">
<span class="material-symbols-outlined">edit</span>
</button>
<button class="delete" data-id="<?= $task['id']; ?>">
<span class="material-symbols-outlined">delete</span>
</button>
</div>
</div>
</li>
<?php
endwhile;
endif; ?>
</ul>
JS
const taskInputField = document.querySelector('#task-form-input');
const btnEdit = document.querySelectorAll('.edit');
const btnDelete = document.querySelectorAll('.delete');
const taskText = document.querySelectorAll('#task-text');
const xhttp = new XMLHttpRequest();
const tasks = document.querySelectorAll('.task');
const sortableList = document.querySelector('.sortable-list');
const items = document.querySelectorAll('.item');
// Sort tasks
items.forEach(item => {
item.addEventListener('dragstart', () => {
// Добавление класса перетаскивания к элементу после задержки
setTimeout(() => item.classList.add('dragging'), 0);
});
// Удаление класса перетаскивания из элемента в событии dragend
item.addEventListener('dragend', () => item.classList.remove('dragging'));
});
const initSortableList = (e) => {
e.preventDefault();
const draggingItem = sortableList.querySelector('.dragging');
// Получение всех элементов, кроме текущего перетаскивания и создания массива из них
const siblings = [...sortableList.querySelectorAll('.item:not(.dragging)')];
for (sibling of siblings){
console.log(sibling.dataset.id);
const url = "handler.php?arrid=" + sibling.dataset.id;
xhttp.open("GET", url, true);
xhttp.setRequestHeader('Content-Type', 'application/x-www-form-url')
xhttp.send();
}
// Поиск родственного элемента, после которого следует разместить
let nextSibling = siblings.find(sibling => {
return e.clientY <= sibling.offsetTop + sibling.offsetHeight / 2;
});
// Вставка перетаскиваемого элемента перед найденным родственным элементом
sortableList.insertBefore(draggingItem, nextSibling);
}
sortableList.addEventListener('dragover', initSortableList);
sortableList.addEventListener('dragenter', e => e.preventDefault());
