Jstree, check if drop is bellow, inside or above the node

296 views Asked by At

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)}
1

There are 1 answers

0
Tiago Camacho On BEST ANSWER

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