如何增加JSTree拖放区域

Question

我正在使用 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"]

    })

附上截图说明！

我想实际上我想增加拖放区并对主“#”节点产生 'snap-to' 效果。也许这不可能？

Screenshot

Answer 1

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

代码可能如下所示。请参阅演示 - 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');
})

如何增加JSTree拖放区域

How to increase JSTree drop area

javascript

jstree