Need jstree with drag and drop function to add the DND plug-in when loading jstree, look at the code:
$ (‘**‘). Jstree ({
// plugins-Introduction of various jstree plugins to show the diversity of trees
‘Plugins’: ["dnd", "types", "wholerow"],
‘Core’: {
"check_callback": true, // check_callback must be set to true when making changes to the tree;
‘Data’: {
‘‘ Url ’:‘ modulemng / list ’,
DataType: ‘json’
}
},
// types- Set the nodes of the tree, including the type and number of child nodes
‘Types’: {
"#": {
"Max_children": 1
}
}
});
After using the DND plugin, it is estimated that the callback function is the DND plug-in, the Jstree API to find the DND plug-in event, and then found how to bind to the tree is not bound. Look carefully at the API to find that the DND plug-in callback event is bound to the document:
$(document).on(‘dnd_stop.vakata‘,function(e,data){
});
This way, when the node is dragged, it can trigger this method, but carefully look at the data passed back the parameters, dizzy.
When you're crazy, you find a Move_node.jstree callback function, which is bound to the Jstree, and returns the data parameter:
These parameters are sufficient for our database operations and are straightforward.
My Code is:
$ ("#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-Introduction of various jstree plugins to show the diversity of trees
‘Plugins’: ["dnd", "types", "wholerow"],
‘Core’: {
"check_callback": true, // check_callback must be set to true when making changes to the tree;
‘Data’: {
‘Url’: ‘modulemng / list’,
dataType: ‘json’
}
},
// types- Set the nodes of the tree, including the type and number of child nodes
‘Types’: {
"#": {
"max_children": 1
}
}
});
});
Returns the current node ID, the parent node ID, and the corresponding location position.