CODEWITHSUNDEEP
javascriptjstree
Cyril Byrne
Cyril Byrne

Reputation: 73

How to increase JSTree drop area

I am using the jstree to build up tasks on a calender. I have set the div on which the tree is initialised to a min height of 50px, which means when I am dragging the first node onto an empty tree I can drop it anywhere within that 50px which is great.

However if I then want to drop another node (onto main tree branch) I now much drop it almost on top of the previous node, which means the user needs to be very exact about where they are dropping

Here is the div container 


here is the code where the JSTree is attached:

    dayTree = moment.format('DD-MM-YYYY');
    $('#' + dayTree).jstree({
        "core": {
            "id": moment.format('DD-MM-YYYY'),
            "animation": 150,
            'check_callback': function (operation, node, node_parent, node_position, more) {
                return true;  //allow all other operations
            },
            "themes": {"stripes": false},
            "data": {
                async: false,
                "url": APIURL+"/shiftassignments?asg_date=" + moment.format('YYYY-MM-DD'),
                "dataType": "json",
                "success": function (data) {

                }
            }
        },
        "rules": {
            droppable: ["tree-drop"],
            multiple: true,
            deletable: "all",
            draggable: "all"
        },
        "contextmenu": {
            'items' : getContextMenu
        },
        "types": {
            "#": {
                "valid_children": ["SH_LS", "SH_AS", "TO_LS", "TO_AS"]
            },
            "SH_AS": {
                "valid_children": ["ST_LS", "ST_AS"]
            },
            "TO_AS" : {
                "valid_children" : ["ST_LS", "ST_AS"]
            },
            "TO_LS" : {
                "valid_children" : [""]
            },
            "SH_LS": {
                "valid_children": [""]
            },
            "ST_LS": {
                "valid_children": [""]
            },
            "ST_AS": {
                "valid_children": [""]
            }
        },
        "dnd": {
            open_timeout: 100,
            always_copy: true,
            large_drop_target: true
        },
        "plugins": ["contextmenu", "dnd", "types"]

    })

attached is a screenshot to explain!

I guess effectively I would like to increase the drop-zone and have a 'snap-to' effect to the main '#' node. Maybe its not possible?

Screenshot

Upvotes: 1

Views: 861

Answers (1)

Nikolay Ermakov
Nikolay Ermakov

Reputation: 5061

I would listen to events on the div container for the second tree and if a dragged item is then dropped on that container and second tree has only the root, then just add it there.

The code could look something like below. See demo - Fiddle.

var overSecondTree = false;

$(document).on('dnd_move.vakata', function(e, data) {
    // change icon to `allow drop` if from first tree and over second tree with a single root node
   if ( $('#tree2 li').length === 1 && overSecondTree ) {
        // change icon to `allow drop`
              $('#vakata-dnd').find('i').removeClass('jstree-er').addClass('jstree-ok');
    } else {
                // change icon to `restrict drop`
        $('#vakata-dnd').find('i').removeClass('jstree-ok').addClass('jstree-er');
    }
});

$(document).on('dnd_stop.vakata', function(e, data) {
    // allow drop to tree2 only if single root node
    if ( $('#tree2 li').length === 1 && overSecondTree) {
        $("#tree2").jstree().create_node('#rootTree2', data.element.text);
    }    
})

$("#tree2").mouseenter(function(event){
     overSecondTree = true;
   if ( $('#tree2 li').length === 1 ) {
      $('#rootTree2').addClass('highlighted');      
   }
})

$("#tree2").mouseleave(function(event){
   overSecondTree = false;
   $('#rootTree2').removeClass('highlighted');
})

Upvotes: 1

Related Questions