javascript - How to increase JSTree drop area -

i using jstree build tasks on calender. have set div on tree initialised min height of 50px, means when dragging first node onto empty tree can drop anywhere within 50px great.

however if want drop node (onto main tree branch) drop on top of previous node, means user needs exact dropping

here div container 


here code jstree 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 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 screenshot explain!

i guess increase drop-zone , have 'snap-to' effect main '#' node. maybe not possible?

screenshot

i listen events on div container second tree , if dragged item dropped on container , second tree has root, add there.

the code below. see demo - fiddle.

var oversecondtree = false;  $(document).on('dnd_move.vakata', function(e, data) {     // change icon `allow drop` if first tree , on second tree single root node    if ( $('#tree2 li').length === 1 && oversecondtree ) {         // change icon `allow drop`               $('#vakata-dnd').find('i').removeclass('jstree-er').addclass('jstree-ok');     } else {                 // change icon `restrict drop`         $('#vakata-dnd').find('i').removeclass('jstree-ok').addclass('jstree-er');     } });  $(document).on('dnd_stop.vakata', function(e, data) {     // allow drop tree2 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'); })