How to get children and id in jQuery Nestable plugin after drag and drop item and update in database?
To send the list to PHP, you have to change your updateOutput function to post the list via AJAX:
<script>$(document).ready(function () { var updateOutput = function (e) { var list = e.length ? e : $(e.target), output = list.data('output'); $.ajax({ method: "POST", url: "saveList.php", data: { list: list.nestable('serialize') } }).fail(function(jqXHR, textStatus, errorThrown){ alert("Unable to save new list order: " + errorThrown); }); }; $('#nestable').nestable({ group: 1, maxDepth: 7, }).on('change', updateOutput);});</script>In PHP, you will receive $_POST['list'], which will look as shown below. In this case, I dragged the 4th item (id 6) to the 2nd place (after id 3) on the list, so the expected order is 3, 6, 4, 5:
Array ( [0] => Array ( [id] => 1 ) [1] => Array ( [id] => 44 [children] => Array ( [0] => Array ( [id] => 3 ) [1] => Array ( [id] => 6 ) [2] => Array ( [id] => 4 ) [3] => Array ( [id] => 5 ) ) ))Then you can just iterate over this array and update your database accordingly.
Edit: In order to save the data in PHP, you'll have to use recursion to navigate all the children arrays that might exist. I wrote a simple script that will save on every ordering change:
index.php
<?phprequire "pdoConnection.php";$list = getFullListFromDB($conn);?><html><head><script src="https://code.jquery.com/jquery-1.11.3.min.js"></script><script src="https://cdn.rawgit.com/dbushell/Nestable/master/jquery.nestable.js"></script><script>$(document).ready(function () { var updateOutput = function (e) { var list = e.length ? e : $(e.target), output = list.data('output'); $.ajax({ method: "POST", url: "saveList.php", data: { list: list.nestable('serialize') } }).fail(function(jqXHR, textStatus, errorThrown){ alert("Unable to save new list order: " + errorThrown); }); }; $('#nestable').nestable({ group: 1, maxDepth: 7, }).on('change', updateOutput);});</script></head><body><div class="cf nestable-lists"> <div class="dd" id="nestable"><?php displayList($list); ?> </div></div></body></html><?phpfunction getFullListFromDB($conn, $parent_id = 0) { $sql = " SELECT id, parent_id, description FROM items WHERE parent_id = :parent_id ORDER BY m_order "; $statement = $conn->prepare($sql); $statement->bindValue(':parent_id', $parent_id, PDO::PARAM_INT); $statement->execute(); $result = $statement->fetchAll(PDO::FETCH_ASSOC); foreach($result as &$value) { $subresult = getFullListFromDB($conn, $value["id"]); if (count($subresult) > 0) { $value['children'] = $subresult; } } unset($value); return $result;}function displayList($list) {?> <ol class="dd-list"> <?php foreach($list as $item): ?> <li class="dd-item" data-id="<?php echo $item["id"]; ?>"><div class="dd-handle"><?php echo $item["description"]; ?></div> <?php if (array_key_exists("children", $item)): ?> <?php displayList($item["children"]); ?> <?php endif; ?> </li> <?php endforeach; ?> </ol><?php}?>saveList.php
<?phprequire "pdoConnection.php";if ($_POST) { saveList($conn, $_POST['list']); exit;}function saveList($conn, $list, $parent_id = 0, &$m_order = 0) { foreach($list as $item) { $m_order++; $sql = " UPDATE items SET parent_id = :parent_id, m_order = :m_order WHERE id = :id "; $statement = $conn->prepare($sql); $statement->bindValue(":parent_id", $parent_id, PDO::PARAM_INT); $statement->bindValue(":id", $item["id"], PDO::PARAM_INT); $statement->bindValue(":m_order", $m_order, PDO::PARAM_INT); $statement->execute(); if (array_key_exists("children", $item)) { saveList($conn, $item["children"], $item["id"], $m_order); } }}?>pdoConnection.php
<?php$server = "myServer"; $database = "DbName"; $username = "myself"; $password = "secret";$conn = new PDO("sqlsrv:Server=$server;Database=$database", $username, $password);?>Table definition (MSSQL)
CREATE TABLE [items]( [id] [int] NOT NULL, [parent_id] [int] NOT NULL, [description] [nvarchar](100) NOT NULL, [m_order] [int] NOT NULL, CONSTRAINT [PK_items] PRIMARY KEY CLUSTERED ([id] ASC)) ON [PRIMARY]INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (1, 0, N'Item 1', 1)INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (2, 0, N'Item 2', 2)INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (3, 2, N'Item 3.1', 3)INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (4, 2, N'Item 3.2', 4)INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (5, 2, N'Item 3.3', 5)INSERT [items] ([id], [parent_id], [description], [m_order]) VALUES (6, 2, N'Item 3.4', 6)