Sorting tables with jQuery user interface:
http://jsfiddle.net/bgrins/tzYbU/
You can apply your own CSS to create any look and feel you want. Please note that this does not support parent relationships with children.
Something that supports parent-child relationships is the jQuery 'treeTable' plugin: https://github.com/ludo/jquery-treetable
Here is the jsFiddle that implements the treeTable plugin: http://jsfiddle.net/mccannf/Tbd38/10/
With pretty simple code:
$(document).ready(function() { $("#dragndrop").treeTable({ expandable: false }); // Drag & Drop Code $("#dragndrop .entry").draggable({ helper: "clone", opacity: .75, refreshPositions: true, // Performance? revert: "invalid", revertDuration: 300, scroll: true } ); $("#dragndrop .entry").each(function() { $($(this).parents("tr")[0]).droppable({ drop: function(e, ui) { $($(ui.draggable).parents("tr")[0]).appendBranchTo(this); setNewParent($($(ui.draggable).parents("tr")[0]).attr("id"), $(this).attr("id")); }, hoverClass: "accept", over: function(e, ui) { if(this.id != $(ui.draggable.parents("tr")[0]).id && !$(this).is(".expanded")) { $(this).expand(); } } }); }); function setNewParent(child, parent) { // do ajax call here //alert(child); //alert(parent); } });
The main disadvantages of this plugin:
- You cannot reorder nodes that are on the same level.
- You cannot move a node to the very top level.
Someone who has the time can unlock the plugin and add these features to it.
source share