JQuery UI を使用したテーブルの並べ替え:
http://jsfiddle.net/bgrins/tzYbU/
独自の CSS を適用して、必要なルック アンド フィールを作成できます。これは親子関係をサポートしていないことに注意してください。
親子関係をサポートするものは、https ://github.com/ludo/jquery-treetable の JQuery 'treeTable' プラグインです。
これは、treeTable プラグインを実装する jsFiddle です:
http://jsfiddle.net/mccannf/Tbd38/10/
かなり単純なコードで:
$(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);
}
});
このプラグインの主な欠点:
- 同じレベルのノードを並べ替えることはできません。
- ノードを一番上のレベルまで移動することはできません。
時間があれば、プラグインをフォークしてこれらの機能を追加できるかもしれません。