Nestable
Drag & drop hierarchical list with mouse and touch compatibility (jQuery plugin)
Code on GitHub @dbushell
Code on GitHub @NalinSajwan
PLEASE NOTE: I cannot provide any support or guidance beyond this README. If this code helps you that's great but I have no plans to develop Nestable beyond this demo (it's not a final product and has limited functionality). I cannot reply to any requests for help.
-
Item 1
-
Item 2
Item 3
Item 4
-
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
-
Item 11
-
Item 12
-
Item 13
-
Item 14
-
Item 15
Item 16
Item 17
Item 18
Serialised Output (per list)
Draggable Handles with Text fields and click events (updated by Nalin Sajwan)
If you're clever with your CSS and markup this can be achieved without any JavaScript changes.
New changes added -
- Added new button Add Row, clicking it will add a new row at the end of nestable list below.
- Updated html to support following -
- Input field - added this because mostly nestable is used with some stored data.
- Links -
Add Row Above - this will add a new row just below from where it is called, it will be very useful when using a hierarchical structure.
Add Row Below - this will add a new row just below from where it is called, it is also very useful for hierarchical structure.
X
Remove Row - this will remove the row from where it is called.
-
Drag
-
Drag
-
Drag
-
Drag
-
Drag
-
Drag
Serialised Output with input data (per list)
Copyright © David Bushell | Made for Browser