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.

score 1 · Accepted Answer · answered Jan 07 '16 at 02:33

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.

answered Jan 07 '16 at 02:33

Nikolay Ermakov

5,031
2
11
18

Thanks for your answer, I will try that today and let you know – Charbel Jan 07 '16 at 08:56
Turned out to be missing images for some reason. Your answer led me to find the reason. Thanks! – Charbel Jan 08 '16 at 15:47

score 1 · Answer 2 · edited Sep 27 '19 at 09:52

As Nikolay Ermakov mentioned here, there is element with id="vakata-dnd" created when you use dnd functionality. You can inspect this element and all it's applied styling directly if you f.e. in Chrome open debug window in separate window at first with Elements tab, then start to drag node and hold mouse button down. While holding mouse button switch to debug window with Alt + Tab keys, then press Tab or Shift + Tab to focus on dom elements and move through elements with arrows. At the bottom of your body will be vakata-dnd element created so you can check all applied styling and find out what is missing.

JsTree drag drop - Icon not showing while moving

2 Answers2