<div id="treediv">
<ul id='tt'></ul>

</div>

<script>

var treedata = [
{"id":"0",
"text":"根節點",
"state":"open",
 "children":[
{"id":6,
"text":"一層子節點1",
    "state":"open",
"iconCls":"icon-location",
"children":[
{"id":58,
"text":"二層子節點",
"state":"open",
"iconCls":"icon-location",
"children":[]
  }]
}],
"checked":true
    }];
$(function(){
ininttree();
});
//初始化樹
function ininttree(){
$('#tt').tree({
data :treedata ,
animate : true,
dnd : true,
onDrop: function (target, source, append){  
//dragnodeid表示要拖拽的節點的id,"dragnode_name"表示要拖拽節點的名字；aimnodeid表示拖拽後所放位置的父節點id
var targetNode = $(this).tree('getNode',target);
var data = {"dragnodeid":source.id,"aimnodeid":targetNode.id,"dragnode_name":source.text};
$.ajax({
type : "post",
url : "./servlet",
dataType : "json",
data : {
"action" : "edit",
"data" : JSON.stringify(data)
},
success : function(data) {
if (data.result) {
$.messager.alert("錯誤", data.detail, "error");
}else {
ininttree() //重新整理資料
$.messager.alert("成功",'儲存成功',"info");
}
}
}); 
}
});
}

</script>

詳細請參照easyui官網