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

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

使用dnd插件后，大家估計(jì)都在想其回調(diào)函數(shù)是dnd插件中的，就會(huì)去找jstree API中的dnd插件事件，然后發(fā)現(xiàn)怎么綁定到tree都綁定不上。仔細(xì)看API才發(fā)現(xiàn)，dnd插件的回調(diào)事件是綁定到document上的：

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

這樣，當(dāng)節(jié)點(diǎn)拖拽后就能觸發(fā)此方法，但仔細(xì)一看data傳回來(lái)的參數(shù)，暈了。

正在抓狂的時(shí)候發(fā)現(xiàn)有個(gè)move_node.jstree回調(diào)函數(shù)，這個(gè)函數(shù)是綁定在jstree上的，而且返回來(lái)的data參數(shù)：

?

這些參數(shù)已足夠我們進(jìn)行數(shù)據(jù)庫(kù)操作了，而且簡(jiǎn)單明了。

我的代碼是：

$( "#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的插件引入，展示樹(shù)的多樣性'plugins' : [ "dnd", "types", "wholerow" ],'core' : {"check_callback" : true,//在對(duì)樹(shù)進(jìn)行改變時(shí)，check_callback是必須設(shè)置為true；'data' :{'url' : 'modulemng/list',dataType:'json'}},//types-對(duì)樹(shù)的節(jié)點(diǎn)進(jìn)行設(shè)置，包括子節(jié)點(diǎn)type、個(gè)數(shù)'types' : {"#" : {"max_children" : 1}} });});

傳回當(dāng)前節(jié)點(diǎn)ID,父節(jié)點(diǎn)ID和相應(yīng)的位置position即可。

轉(zhuǎn)載于:https://www.cnblogs.com/liveandevil/p/3874792.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。