javascript - Drag & Drop child node in Draw2d Custom Layout/Figure

Question

I have a Draw2d(js) custom figure (Table) which contains nested custom figures (Column). I want to grag and drop column from one table to another. I just want from you guys some guidelines how to enable grag & drop, I'll handle other logic. I've seen new draw2d.layout.locator.DraggableLocator() thing but that is not working for me.

const Table = draw2d.shape.layout.VerticalLayout.extend({
  NAME: "Table",
  init: function(attr, setter, getter) {
    this._super(attr
      setter,
      getter
    );

    this.header = new draw2d.shape.layout.HorizontalLayout();

    this.tableNameLabel = new draw2d.shape.basic.Label({ text: attr.name || "Table" });
    this.header.add(this.tableNameLabel);
    this.add(this.header, { row: 0, col: 0 });
    this.columns = attr.columns;
    (attr.columns || []).map((obj, j) => {
      this.add(
        new Column({
          name: obj.name,
          dataType: obj.dataType
        }),
        new draw2d.layout.locator.DraggableLocator() // <---------------------------- Adding locator here
      );
    });
  },
  setName: function(name) {
    this.tableNameLabel.setText(name);

    return this;
  }
});

Thanks in advance :)