Hi Everyone in this tutorial, we’re going to learn how to create Sortable, drag and drop multi-level list with jquery, like wordpress menu page and save data to database.

This example will help you to create sortable nested list, you can manage the list of items (add, edit, delete) and save it to database. Every item has two input: navigation label and navigation url, of course you can add any input you want (checkbox, radio, etc.).

This this how it gonna look like 😍.

Sortable,drag and drop multi-level list

Now, let’s dive into coding! 😀

We are going to use this package below for nestable list.

Step1: Create a database and add this menu table below.


Step2: Create project folder and add db.php file and insert code below


Step3: Create index.php file and insert code below


Step4: Create script.js file and insert this code.


Step5: Create and insert this code below into menu.php


Great, if you followed this tutorial you gonna have same result as this demo below.
By the way, i also offering you source code of this tutorial.

I hope you like it, see you next time 😀.

No Comments

Leave a Reply

your email address will not be published. required fields are marked *