JsTree drag drop - Icon not showing while moving

Question

I have a JsTree with drag and drop plugin enabled. I'm also using an angular directive, https://github.com/ezraroi/ngJsTree.

All is working fine, however, the node being moved does not show while moving. Drag dropping is working though, you just cannot see what you are dropping (It seems as if you are moving nothing).

The documentation doesn't seem to require anything special to make this work.

Here's my configuration:

 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>

A sample node object:{ "dataId":1, "text":"Some text", "type":"Department", "isDeletable":true, "sortIndex":0, "parentId":0 }

I have tried removing all events, the tree-scroll class, downloading the jstree lib from nuget and from the website, removing the type plugin, nothing works. Any help is appreciated.

Answer 1

To show dragging jsTree creates a temporary div with id vakata-dnd. There is probably some css conflict between the libs you use. Try to override the default styling of that div by adding to #vakata-dnd some remarkable styling like red background-color in your latest loaded css and see if that helps.