Перетаскивание между ul с autosave

Question

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

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

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

EDIT! Переписан код в PDO. И чтобы быть ясным: автосохранение означает, что после завершения перетаскивания мне нужны сценарии для автоматического сохранения новой позиции в базе данных (т. Е. Li, который перемещен из списка 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(); 
}); 

Answer 1

Я бы сделать это в двух направлениях: 1. На нагрузке страницы я бы сохранить начальные позиции каждого уль списка (л) элементы и после перетаскивания и падение я бы проверить текущие позиции каждого элемента и в соответствии с этим изменения сделают манипуляции с db (delete/add) с помощью ajax. 2. Сделайте манипуляции с удаленным перетаскиванием (при удалении элемента) с помощью ajax. Это всего лишь идея, как это сделать, взглянуть на события и ajax, и если вы все еще боретесь с чем-то, я буду рад помочь вам.