需要jstree具有拖拽功能需要在加載jstree時添加dnd插件，具體看代碼：

$('**').jstree({//plugins-各種jstree的插件引入，展示樹的多樣性 'plugins' : [ "dnd", "types", "wholerow" ], 'core' : {"check_callback" : true,//在對樹進行改變時，check_callback是必須設置為true；'data' :{'url' : 'modulemng/list',dataType:'json'} }, //types-對樹的節點進行設置，包括子節點type、個數 'types' : {"#" : {"max_children" : 1} } });

使用dnd插件后，大家估計都在想其回調函數是dnd插件中的，就會去找jstree API中的dnd插件事件，然后發現怎么綁定到tree都綁定不上。仔細看API才發現，dnd插件的回調事件是綁定到document上的：

$(document).on('dnd_stop.vakata',function(e,data){});

這樣，當節點拖拽后就能觸發此方法，但仔細一看data傳回來的參數，暈了。

正在抓狂的時候發現有個move_node.jstree回調函數，這個函數是綁定在jstree上的，而且返回來的data參數：

?

這些參數已足夠我們進行數據庫操作了，而且簡單明了。

我的代碼是：

$( "#module_tree" ) .on('move_node.jstree', function(e,data){console.info(data);jQuery.post("modulemng/dndmodule",{ id : data.node.id, parent : data.parent,position:data.position},function(data,status){ alert("Data: " + data + "\nStatus: " + status);}, 'json');}).jstree({//plugins-各種jstree的插件引入，展示樹的多樣性'plugins' : [ "dnd", "types", "wholerow" ],'core' : {"check_callback" : true,//在對樹進行改變時，check_callback是必須設置為true；'data' :{'url' : 'modulemng/list',dataType:'json'}},//types-對樹的節點進行設置，包括子節點type、個數'types' : {"#" : {"max_children" : 1}} });});

傳回當前節點ID,父節點ID和相應的位置position即可。

轉載于:https://www.cnblogs.com/liveandevil/p/3874792.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的jstree 节点拖拽保存数据库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。