Tabulator drag row to div

In tabulator I can move rows between tables, and it works fine. I would like to move rows to a <div> that updates a table, instead of dragging the row to the table.

I tried using <div ondrop="drop(event)">, with the drop function updating the table, but the drop function is not triggered when i drop the row.

Looking at tabulator's source code, it seems like rows are not set as draggable objects, which, in my very limited understanding of javascript, is required to use ondrop.

I was wondering if there is a simple solution to this.

UPDATE: here is a simple code snippet with an example of what I would like to achieve:

var data1 = [{
    "name": "John",
    "city": "New York"
  }, {
    "name": "Bob",
    "city": "Los Angeles"
  }],
  data2 = [{
    "name": "Vince",
    "city": "Tampa"
  }, {
    "name": "Yan",
    "city": "Austin"
  }];

var table1 = new Tabulator("#table1", {
    data: data1,
    layout: "fitColumns",
    movableRows: true,
    movableRowsConnectedTables: "#table2",
    movableRowsReceiver: "add",
    movableRowsSender: "delete",
    columns: [{
        title: "Name",
        field: "name"
      },
      {
        title: "City",
        field: "city"
      },
    ],
  }),

  table2 = new Tabulator("#table2", {
    data: data2,
    layout: "fitColumns",
    movableRows: true,
    movableRowsConnectedTables: "#table1",
    movableRowsReceiver: "add",
    movableRowsSender: "delete",
    columns: [{
        title: "Name",
        field: "name"
      },
      {
        title: "City",
        field: "city"
      },
    ],
  });
  
  // this is the funciton that is not working, i don't know what event looks like or contains, but hoping it has the row I'm dropping. To delete from table1 I was thinking of using tabulator's callbacks
  function drop(event){
    table1.deleteRow();
    table2.addRow();
    console.log(event); // this doesn't log anything, suggesting the funciton is not being called
  };

.tabulator{
margin: 30px;
}

.box{
background: #888;
color: #fff;
}

<script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table1" class="tabulator"></div>
<div id="table2" class="tabulator"></div>

<div id="div_to_drag_to_update_table2" ondrop="drop(event)">
<div class="box">
I would like to drag rows from table 1 here and they go in table 2
</div>
</div>

Thanks

Solution

As of Tabulator 4.7 you can now drag rows onto other DOM Elements.

You set the selector for the element to the movableRowsConnectedElements option. and then use the movableRowsElementDrop callback to handle the drop event.

Lets say we have the following element we want to drop rows onto:

<ul id="drop-element"></ul>

We then define the table, enabling the movableRows option.

We pass the selector for the element to the movableRowsConnectedElements option

Then we use the movableRowsElementDrop callback to handle the drop, it is passed three arguments, the event, the element that the row was dropped onto and the row component for the row that was dropped. It is in this callback you could then trigger the actions on your second table.

//Table to move rows from
var table = new Tabulator("#example-table", {{
    height:311,
    layout:"fitColumns",
    movableRows: true, //enable movable rows
    movableRowsConnectedElements: "#drop-element", //element to receive rows
    movableRowsElementDrop:function(e, element, row){
        //e - mouseup event object
        //element - node object for the element that the row was dropped onto
        //row - row component for the row that was moved

        //add a li to the drop element containing the name property from the row data
        var li = document.createElement("li");
        li.textContent = row.getData().name;
        element.appendChild(li);
    },
    data:tabledata,
    columns:[
        {title:"Name", field:"name"},
    ],
});

Full details on this new functionality can be found in the Movable Rows Documentation