Question

我有一个启用了拖放插件的JsTree。我也使用了角度指令https://github.com/ezraroi/ngJsTree。

一切正常，但移动时节点不会显示。拖拽正在工作，你只是看不到你正在放弃的东西（看起来好像你什么也没动）。

文档似乎并不需要任何特殊的东西来完成这项工作。

这是我的配置：

 var typesConfig = {
            '#': {
                "valid_children": ["Department"],
                'icon': 'fa fa-circle icon-root'
            },

            "Department": {
                'icon': 'fa fa-circle icon-department',
                "valid_children": ["Category"]
            },
            "Category": {
                'icon': 'fa fa-circle icon-category',
                "valid_children": ["Subcategory"]
            },
            "Subcategory": {
                'icon': 'fa fa-circle icon-subcategory',
                "valid_children": []
            }
        };

        $scope.treeConfig = {
            core: {
                multiple: false,
                animation: 200,
                check_callback: true
            },
            dnd: {

            },
            types: typesConfig,
            version: 1, //Used by the angular directive
            plugins: ['types', 'dnd']
        };

HTML：

<div id="jstreeDep" class="tree-scroll" js-tree="treeConfig" ng-model="treeData" should-apply="listen()" tree-events="changed:selectionChanged; before_open:nodeOpenCallback"></div>

示例节点对象：{ "dataId":1, "text":"Some text", "type":"Department", "isDeletable":true, "sortIndex":0, "parentId":0 }

我已经尝试删除所有事件，树滚动类，从nuget和网站下载jstree lib，删除类型插件，没有任何作用。任何帮助表示赞赏。

Answer 1

要显示拖动，jsTree会创建一个标识为vakata-dnd的临时div。您使用的库之间可能存在一些css冲突。尝试通过在最新加载的CSS中添加#vakata-dnd一些非凡的样式（如红色背景色）来覆盖该div的默认样式，看看是否有帮助。

Answer 2

正如Nikolay Ermakov在此处提到的那样，当您使用dnd功能时，会创建带有id="vakata-dnd"的元素。您可以直接检查此元素及其所有应用样式。在Chrome中，首先使用“元素”标签在单独的窗口中打开调试窗口，然后开始拖动节点并按住鼠标按钮。按住鼠标键使用Alt + Tab键切换到调试窗口，然后按Tab或Shift + Tab聚焦于dom元素并使用箭头在元素之间移动。在您身体的底部将创建vakata-dnd元素，以便您可以检查所有应用的样式并找出缺少的内容。

JsTree拖放 - 移动时图标不显示

2 个答案: