Drag and Drop Copies Of Tree Items

Webix JS
1

Hi, I can’t work out how to drag and drop a copy of an item from one tree to another. At the moment it moves the item rather than copying it. I have two tree tables, one contains set items and the other is the target. I basically want to be able to add items to the target tree but keep the items available in the source tree. Any help would be great thanks.

2

you can use onBeforeDrop handler to redefine default d-n-d behavior

       onBeforeDrop:function(dnd){
         var details = { parent:dnd.parent };
         dnd.from.copy( dnd.source, dnd.index, dnd.to, details);
         return false;
       }

http://webix.com/snippet/42c62593

3

Hi Maksim,
That worked great thanks!

4

One more thing,
How can I change the ID of the new(copied) item before it gets dropped?
I need to save the new item onAfterDrop using Ajax, but the ID is the same as the source item ID.

5

I just saw in the docs that I can set the newId using:

var details = { newId:webix.uid() };
  context.from.copy(context.source[i], context.start, context.to, details);

This is great but when I use onAfterDrop, the ID is still the same as the source ID. Any ideas?

6

My events look like this:

$$("tree").attachEvent("onBeforeDrop", function(context, ev){
        for (var i=0; i < context.source.length; i++){
            var details = { newId:webix.uid() };
            context.from.copy(context.source[i], context.start, context.to, details);
        }
    });

    $$("tree").attachEvent("onAfterDrop", function(context, ev){
        for (var i=0; i < context.source.length; i++){
            var itemId = context.source[i];
            var newParentId = this.getParentId(itemId);
            var newPosition = this.getBranchIndex(itemId);
            var updateData = { poId:itemId,poParentId:newParentId,poPosition:newPosition };

            webix.ajax().post("save.php", updateData,{
                error:function(text, data, ajax){
                    webix.message("Error -"+ajax.status);
                },
                success:function(text, data, ajax){
                    if(ajax.status == 0) {
                        webix.message("Connection Error...");
                    }
                    if (data.json().finished) {

                    }
                }
            });
        }
        //return false;
    });
7 
onBeforeDrop:function(dnd){
         var details = { parent:dnd.parent, newId: 123 }; //<- set it here
8

How do I use this new ID in the “onAfterDrop” event?

9

If you are returning false from the onBeforeDrop event - onAfterDrop will not occur at all.

If you are returning true - component will move item in additional to copy logic in onBeforeDrop handler.

10

Ok thanks, so instead of saving the new item onAfterDrop I would have to have a save button to do this?

11

Hi Maksim,
I figured it out, thanks for your help in the matter. Instead of using onAfterDrop, I just did it all in the onBeforeDrop. Don’t know why I didn’t think of that first!