Drag and Drop UniTreeNode

[mos]

Can anyone tell me what I need to do to be able to drag a treenode in a treeview and drop it on a panel?

[mos]

Bumping this item.

 

I need to know if it's possible to drag and drop from a treenode in a treeview to a panel?

 

If so can someone provide some example code.

[Sherzod]

Hi,

 

Yes it is possible, please wait, we will try to give you a solution

[Sherzod]

Hi,

 

Try this solution:

 

For example:

 

1. UniTreeView1 -> ClientEvents -> UniEvents -> function beforeInit:

function beforeInit(sender, config)
{
    config.viewConfig = {
        plugins: {
            ptype: 'treeviewdragdrop',
            ddGroup: 'tree2panel',
            appendOnly: true
        },
        listeners: {
            beforedrop: function(node, data, overModel, dropPos, opts) {
                
            },
            drop: function(node, data, overModel, dropPos, opts) {
                
            }

        }
    };
}

2. UniPanel1 -> ClientEvents -> ExtEvents -> function afterrender:

function afterrender(sender, eOpts)
{
    var me = sender;
    me.dropTarget = Ext.create('Ext.dd.DropTarget', me.getEl(), {
        ddGroup: 'tree2panel',
        notifyDrop: function(source, evt, data) {
            //data.records[0].data.text
            //ajaxRequest(me, ....) 
            me.update(data.records[0].data.text);
        },
        notifyEnter: function() {
            
        }
    });
}

Result:

 

 

Best regards,

[herculanojs]

Taking advantage of the topic.

I need to drag between the nodes of the treeview, so that I could take the whole set of child nodes together to the drag position.

Placing one node inside another, etc.

[mos]

Hi Delphi Developer,

 

  Thanks for code.

 

  I have another question:

• when the drop occurs how can I call a Delphi procedure so I can process the information that was dragged to the panel?

[Sherzod]

Hi,

 

  I have another question:

• when the drop occurs how can I call a Delphi procedure so I can process the information that was dragged to the panel?

 

1. UniPanel1 -> ClientEvents -> ExtEvents -> function afterrender:

function afterrender(sender, eOpts)
{
    var me = sender;
    me.dropTarget = Ext.create('Ext.dd.DropTarget', me.getEl(), {
        ddGroup: 'tree2panel',
        notifyDrop: function(source, evt, data) {
            //data.records[0].data.text
            ajaxRequest(me, 'dropped', ['id='+data.records[0].data.id, 'text='+data.records[0].data.text]);
            //me.update(data.records[0].data.text);
        },
        notifyEnter: function() {
            
        }
    });
}

2. UniPanel1 -> OnAjaxEvent:

procedure TMainForm.UniPanel1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = 'dropped' then
  begin
    //ShowMessage(Params.Values['id'] + ', ' + Params.Values['text']);
    (Sender as TUniPanel).Caption := Params.Values['text'];
  end;

end;

And tell me what parameters you need also...

 

Best regards,

[mos]

Hi Delphi Developer,

 

  Thanks for code again which work just fine however I have one issue which I am trying to get around.

 

  On the treeview I have an onChange event and what I am finding is that when I click and hold down the mouse to start drag the onChange will trigger as well.

 

   Do you know of a way I can avoid the onChange being triggered when I try and start a drag?

[tedeski]

 

I just need to copy the node and not move it, how?

[Sherzod]

49 minutes ago, tedeski said:

 

I just need to copy the node and not move it, how?

Can you please specify which edition and build of UniGUI are you using? 

[tedeski]

40 minutes ago, Sherzod said:

Can you please specify which edition and build of UniGUI are you using? 

the latest trial version

[tedeski]

Version:1.50.0 build 1480

[Kamyar]

I need to drag Treenodes between one treeview and write enddrag event in pascal to do somting? how can i use enddrag event?
we dont have any dragemode properties like VCL.