Javascript 如何增加树木的落差面积

我正在使用jstree在日历上建立任务。我已经将初始化树的div设置为最小高度50px，这意味着当我将第一个节点拖到空树上时，我可以将其放到50px内的任何位置，这非常好

然而，如果我想把另一个节点（放在主树分支上），我现在几乎把它放在前一个节点的顶部，这意味着用户需要非常准确地知道他们要放在哪里

这是div容器 


下面是附加JSTree的代码：

    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"]

    })

附件是一个屏幕截图解释

我想我会有效地增加放置区域，并对主“#”节点产生“捕捉到”效果。也许这是不可能的

---

我会监听第二棵树的div容器上的事件，如果一个被拖动的项目被放到该容器上，而第二棵树只有根，那么只需将它添加到那里

代码可能如下所示。见演示-

---

我将监听第二棵树的div容器上的事件，如果一个被拖动的项目被放到该容器上，并且第二棵树只有根，那么就将它添加到那里

代码可能如下所示。见演示-

---

没有代码的问题不太可能被回答当树中已经有多个节点时会发生什么？哪一个应该接受删除？Juan，我现在添加了代码来显示Javascipt树的连接位置。嗨，Nikolay，我现在添加了代码来显示树是如何创建的。因此，您可以看到，有许多节点类型可以放置在“#”节点上（这些类型是从另一棵树拖动的）。当“#”上当前没有节点时，用户可以将节点放置在包含div的任何位置（高度为150px）。然后，他们可以直观地将任何有效的子节点拖到此节点上，因为他们知道应该将子节点拖放到父节点/目标节点上。但是，如果他们想将另一个父节点拖到树上（“#”），他们现在有一个非常小的区域可以将其拖到。他们必须将其放置在现有父节点的10px范围内。。我不确定我是否清楚？不带代码的问题不太可能被回答当树中已经有多个节点时会发生什么？哪一个应该接受删除？Juan，我现在添加了代码来显示Javascipt树的连接位置。嗨，Nikolay，我现在添加了代码来显示树是如何创建的。因此，您可以看到，有许多节点类型可以放置在“#”节点上（这些类型是从另一棵树拖动的）。当“#”上当前没有节点时，用户可以将节点放置在包含div的任何位置（高度为150px）。然后，他们可以直观地将任何有效的子节点拖到此节点上，因为他们知道应该将子节点拖放到父节点/目标节点上。但是，如果他们想将另一个父节点拖到树上（“#”），他们现在有一个非常小的区域可以将其拖到。他们必须将其放置在现有父节点的10px范围内。。我不确定我是否清楚？非常感谢。我的实际结构要复杂得多，所以需要进行一些调整，但你让我走上了正确的道路！再次感谢，非常感谢。我的实际结构要复杂得多，所以需要进行一些调整，但你让我走上了正确的道路！再次感谢。

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