Simple drag and drop implementation from UniListBox1 to UniListBox2

[Sherzod]

Hello,

1. Initialization:

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniListBox1.JSInterface.JSConfig('ddReorder', [True]);
end;

2. Settings:

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  UniListBox1.JSInterface.JSAssign('dropZone.isTarget', [False]); //Disable reorder...

  UniListBox2.JSInterface.JSCode(
    'Ext.create("Ext.dd.DropTarget", '#1'.getEl(), {'+
    '    ddGroup: '+ UniListBox1.JSName +'.dropZone.ddGroup,'+
    '    notifyDrop: function(source, evt, data) {  '+
    '        if (data.records) {data.records.forEach(function(rec){ajaxRequest('#1', "_drop", {val: rec.data.val}, false)})}'+
    '    },                                         '+
    '    notifyEnter: function() {                  '+
    '                                               '+
    '    }                                          '+
    '});                                            '
  )
end;

3. Usage:

procedure TMainForm.UniListBox2AjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = '_drop' then
  begin
    UniListBox2.Items.Add(UniListBox1.Items[UniListBox1.Items.IndexOf(Params.Values['val'])]);
    UniListBox1.Items.Delete(UniListBox1.Items.IndexOf(Params.Values['val']));
  end;

end;

[picyka]

Works great, you're a beast of a Sherzod

 

Gratitude;