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

    })

附件是截图解释！

我猜我有效地希望增加掉落区域并且有一个“快速”按钮。效果主要＆＃39;＃＆＃39;节点。也许它不可能？

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下降区域

1 个答案: