Search code examples
javascriptjstreejstree-dnd

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


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

Solution

  • 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