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

Question

我有一个启用了拖放插件的 JsTree。我也在使用 angular 指令，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 }

我尝试删除所有事件，树滚动 class，从 nuget 和网站下载 jstree 库，删除类型插件，但没有任何效果。感谢任何帮助。

Answer 1

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

Answer 2

正如 Nikolay Ermakov 在这里提到的，当您使用 dnd 功能时，会创建一个带有 id="vakata-dnd" 的元素。如果 f.e，您可以直接检查此元素及其应用的所有样式。在 Chrome 中，首先使用 Elements 选项卡在单独的 window 中打开 debug window，然后开始拖动节点并按住鼠标按钮。在按住鼠标按钮的同时使用 Alt + Tab 键切换到调试 window，然后按 Tab 或 Shift + Tab 以关注 dom 元素并使用箭头在元素之间移动。 body 的底部将创建 vakata-dnd 元素，因此您可以检查所有应用的样式并找出缺少的内容。

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

JsTree drag drop - Icon not showing while moving

javascript

jstree

angularjs

jstree-dnd