jsTree is jquery plugin, that provides interactive trees. For more info please visit the plugin's
Home or
Github Repo.
Drag & Drop
Here's a jsTree example with drag and drop functionality. For more info, please visit the official website.
$("#kt_docs_jstree_dragdrop").jstree({
"core" : {
"themes" : {
"responsive": false
},
// so that create works
"check_callback" : true,
'data': [{
"text": "Parent Node",
"children": [{
"text": "Initially selected",
"state": {
"selected": true
}
}, {
"text": "Custom Icon",
"icon": "ki-solid ki-map text-danger fs-5"
}, {
"text": "Initially open",
"icon" : "ki-solid ki-folder text-success",
"state": {
"opened": true
},
"children": [
{"text": "Another node", "icon" : "ki-solid ki-file text-waring"}
]
}, {
"text": "Another Custom Icon",
"icon": "ki-solid ki-book text-warning fs-6"
}, {
"text": "Disabled Node",
"icon": "ki-solid ki-check text-success",
"state": {
"disabled": true
}
}, {
"text": "Sub Nodes",
"icon": "fa fa-folder text-danger",
"children": [
{"text": "Item 1", "icon" : "ki-solid ki-file text-waring"},
{"text": "Item 2", "icon" : "ki-solid ki-file text-success"},
{"text": "Item 3", "icon" : "ki-solid ki-file text-default"},
{"text": "Item 4", "icon" : "ki-solid ki-file text-danger"},
{"text": "Item 5", "icon" : "ki-solid ki-file text-info"}
]
}]
},
"Another Node"
]
},
"types" : {
"default" : {
"icon" : "ki-solid ki-folder text-success"
},
"file" : {
"icon" : "ki-solid ki-file text-success"
}
},
"state" : { "key" : "demo2" },
"plugins" : [ "dnd", "state", "types" ]
});<div id="kt_docs_jstree_dragdrop"></div>
2024©
Keenthemes
