I know the title is confusing, but basically the problem I'm running into is the following:

Suppose 2 Bootstrap Tables like:

Table 1:

Table 2:

I want to be able to drag one row from a table into the other. I am able to achieve this with dragula, but when I drag a row (say row 1 in table 1), dragula renders it like this:

1Drag1.00

I would like for it to render like its a row in the table, or at the very least render just the Title field.

I've tried experimenting with the following JS function:

let d = dragula([document.getElementById("table1"), document.getElementById("table2")]);
d.on("drag", (el, source) => {
  let c = document.getElementsByClassName("gu-transit")[0];
  c.outerHTML = "<h1>" + c.innerHTML + "</h1>";
});

but this would always result in an error (probably because .gu-transit isn't in the DOM before this listener is called)

Any feedback would be appreciated!