I already know how to get the ID from the dragged node and from the target node. However I need to know if that drop was inside the node bellow or above. How can I do that?
divTree.jstree({
'core': {
'check_callback': true,
'data': data,
'themes': {
'icons': hasIcons,
'dots': hasDots
}
},
'plugins': ['themes', 'ui', 'search', 'contextmenu','dnd'],
'search': {
'case_sensitive': false,
'show_only_matches': true
},
'contextmenu': {
'items': contextMenu != null ? contextMenu : ''
}
})
This is my JStree
$(document).on("dnd_stop.vakata", eventDrop);
This is How I call the drop event
const eventDrop = (data) => {
let elementID = data.data.nodes[0]
let targetID = data.event.target.parentNode.id;
}
And this is where I get th enodes ID
I would like to find something like:
const eventDrop = (data) => {
let elementID = data.data.nodes[0]
let targetID = data.event.target.parentNode.id;
let elementPosition = data.event.indexPos; (Where it could say if its inside, bellow, our above)}
Ok after I took a deeper look inside the Jstree code I think I found the answer. So basically what I did is every time the mouse moves inside the tree, checks if the position of the mouse towards the element that is hover (or closest) is bellow, above or inside.
I changed my event to this:
const evt_adminmodules_areaTree_OnDrop = (e, data) => {
if (data.event.type == 'mouseup') {
let elementID = data.data.nodes[0]
let targetID = data.event.target.parentNode.id;
}
else if (data.event.type == 'mousemove') {
let ref = $(data.event.target).closest('.jstree-anchor');
let off = ref.offset();
if (off) {
let rel = data.event.pageY - off.top;
let h = ref.outerHeight();
if (rel < h / 3) _dropPosition = 'up';
else if (rel > h - h / 3) _dropPosition = 'bot';
else _dropPosition = 'mid';
}
}
}
At least for this solved the problem :D! Thank you