Dragging a foreign object into JSTree problem

[Alan Tham]

Hi!

I would like to drag and drop a foreign object ( a div) into JSTree. But when I drag to the tree, I get a red cross icon. How to have a green tick?

'dnd': {

                        'drag_check': function(data) {

                            return (data.attr('class') == 'dragToJsTree') ? true : false; 

                        }    

                    },    

                    "plugins": [

                        "dnd", "search", "state", "types", "wholerow",  "ui", "crrm", "sort"

                    ]

and my div is:

<div class="dragToJsTree" style="width:300px">Hello World</div>

Please help. Thanks

[Ivan Bozhanov]

This is the way to do it in 3.0.0:
https://groups.google.com/d/msg/jstree/BYppISuCFRE/KKh7oHZzNkwJ

[Alan Tham]

Hi! Thanks for the link.

But I want to know the id of the dragged element and the id of the dropped element. 

I have uncommented: if(data.data.jstree && data.data.origin) { console.log(data.data.origin.get_node(data.element)); }

But it does not give my any value. 

Please help. thanks.

[Ivan Bozhanov]

You are looking at the wrong place - the copy_node event gets triggered when you drop a foreign element on jstree, and you get all the information back that you passed in when the drag started.
Look at the nodes array that is passed in when the drag is started, you can add more stuff to it:
'nodes' : [{ id : true, text: $(this).text(), 'data' : {'more':'stuff'} }]

And read it back when copy_node fires:
$('#tree').on('copy_node.jstree', function (e, data) {
 console.log(data.node.data.more); // stuff
});

[Alan Tham]

Hi!

But the copy_node event does not get triggered. There is nothing in the console.log Please help. This is my code:

<div class="drag" style="padding:5px; display:inline-block; background:red; border-radius:4px;">Drag me</div>

    <div id="tree" class="jstree jstree-default"></div>

    <div class="drop" style="min-height:200px; min-width:200px; background:lime; border-radius:10px;">Drop here</div>

<script>

    $(function () {

        $('#tree').jstree({

            'plugins': [ 'dnd' ]

        });

        $('#tree').on('copy_node.jstree', function (e, data) {

            console.log(data.node.data.id); // stuff

           });

        $('.drag')

            .on('mousedown', function (e) {

                return $.vakata.dnd.start(e, { 'jstree' : true, 'obj' : $(this), 'nodes' : [{ id : 1, text: $(this).text() }] }, '<div id="jstree-dnd" class="jstree-default"><i class="jstree-icon jstree-er"></i>' + $(this).text() + '</div>');

            });

        $(document)

            .on('dnd_move.vakata', function (e, data) {

                var t = $(data.event.target);

                if(!t.closest('.jstree').length) {

                    if(t.closest('.drop').length) {

                        data.helper.find('.jstree-icon').removeClass('jstree-er').addClass('jstree-ok');

                    }

                    else {

                        data.helper.find('.jstree-icon').removeClass('jstree-ok').addClass('jstree-er');

                    }

                }

            })

            .on('dnd_stop.vakata', function (e, data) {

                var t = $(data.event.target);

                if(!t.closest('.jstree').length) {

                    if(t.closest('.drop').length) {

                        $(data.element).clone().appendTo(t.closest('.drop'));

                    }

                }

            });

  });

</script>

[Ivan Bozhanov]

As stated on jstree.com - set core.check_callback to true:
$('#tree').jstree({ core : { 'check_callback' : true }, plugins : ...

Best regards,
Ivan

[Alan Tham]

Hi Ivan,

I am still unable to trigger copy_node. The console.log shows nothing.

 Here's my code: (Please help. Thanks.)

$(function () {

        $('#tree').jstree({

            core : { 'check_callback' : true }, 

[Ivan Bozhanov]

I do not see you setting data.id in { id : 1, text: $(this).text() }
Please copy & paste the following exactly (you do not need to handle dnd_stop and dnd_move manually):



$('#tree').jstree({
    'core': {
        'check_callback' : true
    },
    'plugins': [ 'dnd' ]


}).on('copy_node.jstree', function (e, data) {


    console.log(data.node);


});

$('.drag')
    .on('mousedown', function (e) {


        return $.vakata.dnd.start(e, { 'jstree' : true, 'obj' : $(this), 'nodes' : [{ id : true, text: $(this).text(), 'data' : {'more':'stuff'} }] }, '<div id="jstree-dnd" class="jstree-default"><i class="jstree-icon jstree-er"></i>' + $(this).text() + '</div>');
    });



[Alan Tham]

Hi Ivan,

I did a copy and paste and still did not get the console.log. Please help. thanks. Here's my code:

<div class="drag" style="padding:5px; display:inline-block; background:red; border-radius:4px;">Drag me</div>

    <div id="tree" class="jstree jstree-default"></div>

    <div class="drop" style="min-height:200px; min-width:200px; background:lime; border-radius:10px;">Drop here</div>

    <script>

        $('#tree').jstree({

            'core': {

                'check_callback': true

            },

            'plugins': ['dnd']

        }).on('copy_node.jstree', function(e, data) {

[Ivan Bozhanov]

So you are trying to create a root node by dragging a foreign item, right? I did not understand that is the case. You have no items inside the tree, right?

[Ivan Bozhanov]

You do have all the JS and CSS files included, right? And those files should be the latest from github.

[Alan Tham]

Hi Ivan,

Actually, I have jstree which is for folders and another seperate div which have files in it. When I click on the folder, I will have files displayed in that div. 

What I want to do with the drag and drop feature is to allow the user to move files from one directory to another. The following illustrates it:

JSTREE:

folderA

folderB

Another DIV (which would appear when I click on folderA):

file1

file2.

If I drag file1 into folderB, the file will be under folder B.

I have the JS and CSS:

        <link rel="stylesheet" type="text/css" href="../scripts/jstree/themes/default/style.min.css" />

        <link rel="stylesheet" type="text/css" href="../scripts/css/smoothness/jquery-ui-1.10.4.custom.min.css" />

        <link rel="stylesheet" type="text/css" href="../scripts/jstree/themes/default/style.min.css" />

        <script type="text/javascript" src="../scripts/jstree/libs/jquery.js"></script>        

        <script type="text/javascript" src="../scripts/jstree/jstree.min.js"></script>

        <script type="text/javascript" src="../scripts/jstree/libs/require.js"></script>

        <script type="text/javascript" src="../scripts/jstree/libs/jquery.ui.touch.js"></script>

Please help. Thanks

[Ivan Bozhanov]

But do you have the latest from github?

[Alan Tham]

Hi Ivan,

Yes I do. Version 3.0.0-beta9 2014-03-10. Hrere's my code: (Please help. thanks)

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>JSP Page</title>

        <link rel="stylesheet" type="text/css" href="../scripts/jstree/themes/default/style.min.css" />

        <link rel="stylesheet" type="text/css" href="../scripts/css/smoothness/jquery-ui-1.10.4.custom.min.css" />

        <link rel="stylesheet" type="text/css" href="../scripts/jstree/themes/default/style.min.css" />

        <script type="text/javascript" src="../scripts/jstree/libs/jquery.js"></script>        

        <script type="text/javascript" src="../scripts/jstree/jstree.min.js"></script>

        <script type="text/javascript" src="../scripts/jstree/libs/require.js"></script>

        <script type="text/javascript" src="../scripts/jstree/libs/jquery.ui.touch.js"></script>

        <script>

            function load() {

                $('#tree').jstree({

                    'core': {

                        'check_callback': true

                    },

                    'plugins': ['dnd']

                }).on('copy_node.jstree', function(e, data) {

                    console.log(data.node);

                });

                $('.drag')

                        .on('mousedown', function(e) {

                            return $.vakata.dnd.start(e, {'jstree': true, 'obj': $(this), 'nodes': [{id: true, text: $(this).text(), 'data': {'more': 'stuff'}}]}, '<div id="jstree-dnd" class="jstree-default"><i class="jstree-icon jstree-er"></i>' + $(this).text() + '</div>');

                        });

            }

            

        </script>

    </head>

    <body onload="load()">

        <div class="drag" style="padding:5px; display:inline-block; background:red; border-radius:4px;">Drag me</div>

        <div id="tree" class="jstree jstree-default"></div>

        <div class="drop" style="min-height:200px; min-width:200px; background:lime; border-radius:10px;">Drop here</div>

 </body>

</html>

[Ivan Bozhanov]

Remove require.js and remove jquery.ui.touch.js (by the way - it was removed a few versions back - I do not know how you still have that file if you updated recently).

Best regards,
Ivan

[Alan Tham]

Hi Ivan,

The require.js and jquery,ui.touch.js are from the download from http://www.jstree.com/

The jstree.min.js is version 3.0.0-beta9 2014-02-27.

I have downloaded verison3.0.0 beta 9 2014-03-10.

It is still not showing the console.log. Is there anyway I can find out where is the problem? Attached is the jstree.min.js file

Please help. Thanks.

[Ivan Bozhanov]

As I said - download from github: https://github.com/vakata/jstree/archive/master.zip
And remove all references to require.js and ui.touch - you do not need them.

[Ivan Bozhanov]

This code works fine - drag the "drag me" red div and drop it on the orange tree (just fix the paths to style.css / jquery.js / jstree.js) :

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>

    <link rel="stylesheet" href="./../dist/themes/default/style.min.css" />

    <script src="./../dist/libs/jquery.js"></script>
    <script src="./../dist/jstree.js"></script>

    <script>
    $(function () {
        $('#tree')
            .jstree({

                'core': {
                    'check_callback': true
                },
                'plugins': ['dnd']
            })
            .on('copy_node.jstree', function(e, data) {
                console.log(data.node);
            });
        $('.drag')
            .on('mousedown', function(e) {
                return $.vakata.dnd.start(e, {'jstree': true, 'obj': $(this), 'nodes': [{id: true, text: $(this).text(), 'data': {'more': 'stuff'}}]}, '<div id="jstree-dnd" class="jstree-default"><i class="jstree-icon jstree-er"></i>' + $(this).text() + '</div>');
            });

    });
    </script>
</head>
<body>

    <div class="drag" style="padding:5px; display:inline-block; background:red; border-radius:4px;">Drag me</div>

    <div id="tree" class="jstree jstree-default" style="min-height:100px; background:orange;"></div>
</body>
</html>

11 март 2014, вторник, 03:25:35 UTC+2, Alan Tham написа:

[Alan Tham]

Hi Ivan, 

It works. Thanks!

Now the dragged node appears as a subfolder of the dropped folder. Is it possible that it does not appear at all?

I just want the id of the dragged node and the id of the dropped folder returned. That's all.

Please help. Thanks.

[Alan Tham]

Hi Ivan,

In addition, how do I specify a different ID for each new file? I have tried:

var div = document.createElement('div');

                    div.setAttribute('class', 'drag');

                    div.setAttribute('style', 'width:100%');

                    div.setAttribute('id', 'file' + data.mediaId[i]);                    

                    div.style.cursor = 'default';

                    div.appendChild(document.createTextNode(data.mediaName[i]));

                    document.getElementById('jstree').appendChild(div);

                    var mediaIdNew = data.mediaId[i];

                    $('#file' + mediaIdNew)

                        .on('mousedown', function(e) {

                            return $.vakata.dnd.start(e, {'jstree': true, 'obj': $(this), 'nodes': [{id: true, text: $(this).text(), 'data': {'mediaId': mediaIdNew}}]}, '<div id="jstree-dnd" class="jstree-default"><i class="jstree-icon jstree-er"></i>' + $(this).text() + '</div>');

                        });

The mediaId returned is always the last ID of the array. How do I specify a different one each? Please help. Thanks

[Ivan Bozhanov]

In your case - inside the copy_node.jstree event handler add "data.instance.delete_node(data.node);" as the last line:
on("copy_node.jstree", function (e, data) {
  ...
  data.instance.delete_node(data.node);
});

As for your other problem - it has nothing to do with jstree, it is a classic rookie javascript mistake. I'd suggest you read up on that, but in the mean time, just to get your code working replace:
'data': {'mediaId': mediaIdNew}

With:
'data': {'mediaId': $(this).attr('id').replace('file','')}

Best regards,
Ivan



[Alan Tham]

Hi Ivan,

Thanks! It works.

Thanks a million.

[Alan Tham]

Hi Ivan,

One more thing: Is it possible to drop a foreign object exactly at the folder, instead of under and above it?

Thanks.

[Alan Tham]

Hi Ivan,

Is it possible for multiple foreign object to be dropped into the folder?

Thanks.

[Ivan Bozhanov]

Yes, it is up to you - it depends on what you return in check_callback. Get the latest code from github and you can use it like so:
check_callback : function (operation, node, node_parent, node_position, more) {
  if( (operation == "copy_node" || operation === "move_node") && more && more.dnd && more.dnd.pos !== "i") {
   return false;
  }
  return true;
}

As for multiple nodes - $.vakata.dnd.start acceps an array for 'nodes' so you can add multiple objects there. But how you collect those is up to you - depends on your application and is not related to jstree.

Best regards,
Ivan

[Alan Tham]

Hi Ivan, 

I downloaded the latest from github (which was updated 14 hrs ago) and added in the code as above.

But now I couldn't drag and drop anything. I did not change anything else. If I change the check_callback: true, then the result is same as last time. 

Please help. Thanks

[Ivan Bozhanov]

It all depends on the logic of your app - it was just example code - you need to set check_callback to a function and add the logic yourself. You have all the variables, log or debug as needed. Sorry, but I cannot provide complete solutions to everyone - I try to help as much as I can, but I offer a free open-source project, not a service :)
Experiment with check_callback, see what you can use from the variables and if you run into any problems - let me know.

Best regards,
Ivan