Перетащите между ul с автосохранением

Я довольно плохо знаком с javascripting и php. Мне нужно создать набор отдельных списков и иметь возможность перетаскивать элементы между списками. Порядок в каждом списке на самом деле не имеет значения (должен быть в состоянии изменить с помощью SORT BY).

С помощью некоторых других пользователей у меня есть функция перетаскивания элементов, но мне также нужно, чтобы она автоматически сохранялась в базе данных, и я не уверен, с чего начать.

Перетащите и опустите изображение

Может ли кто-нибудь помочь мне в правильном направлении?

РЕДАКТИРОВАТЬ! Переписать код на PDO. И чтобы быть ясным: автосохранение означает, что после завершения перетаскивания мне нужно, чтобы скрипты автоматически сохраняли новую позицию в базе данных (т. Е. Библиотека, которая перемещается из списка 1 в список 2, должна обновляться до позиции 2 в база данных после завершения перетаскивания).

//PHP to connect and echo out the three lists
<?php
$db = new PDO('mysql:host=server;dbname=db;charset=utf8mb4', 'user', 'password');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

// List 1
echo '<ul id="items1" class="items">';
foreach($db->query('SELECT * FROM dragcolumn WHERE position = 1') as $row) {
echo '<li class="list" id="recordsArray_'.$row['id'].'">'.$row['name'].'</li>';
}
echo '</ul>';

// List 2
echo '<ul id="items2" class="items">';
foreach($db->query('SELECT * FROM dragcolumn WHERE position = 2') as $row) {
echo '<li class="list o" id="recordsArray_'.$row['id'].'">'.$row['name'].'</li>';
}
echo '</ul>';

//List 3
echo '<ul id="items3" class="items">';
foreach($db->query('SELECT * FROM dragcolumn WHERE position = 3') as $row) {
echo '<li class="list g" id="recordsArray_'.$row['id'].'">'.$row['name'].'</li>';
}
echo '</ul>';
?>

//Javascript to move the <li> items
$(function () {
$("#items1,#items2,#items3,#items4").sortable({
connectWith: "#items1,#items2,#items3,#items4",
start: function (event, ui) {
ui.item.toggleClass("highlight");
},
stop: function (event, ui) {
ui.item.toggleClass("highlight");
}
});
$("#items1,#items2,#items3,#items4").disableSelection();
});

0

Решение

Я бы сделал это двумя способами:
1. При загрузке страницы я сохраняю начальные позиции каждого списка ul (элементы li), а после перетаскивания я проверяю текущие позиции каждого элемента и в соответствии с этими изменениями выполняю манипуляции с БД (удаление / добавление) с использованием ajax. ,
2. Выполните манипуляции с БД с помощью успешного перетаскивания (когда элемент сбрасывается), также используя ajax.
Это просто идея, как это сделать, взглянуть на события и Ajax, и если вы все еще боретесь с чем-то, я буду рад помочь вам.

0

Другие решения

Других решений пока нет …