Sé que el título es confuso, pero básicamente el problema con el que me encuentro es el siguiente:

Supongamos 2 tablas Bootstrap como:

Tabla 1:

Tabla 2:

Quiero poder arrastrar una fila de una tabla a la otra. Puedo lograr esto con dragula , pero cuando arrastro una fila (por ejemplo, la fila 1 en la tabla 1), dragula lo muestra así:

 1Drag1.00

Me gustaría que se representara como una fila en la tabla, o al menos representar solo el campo Título .

He intentado experimentar con la siguiente función JS:

 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>"; });

pero esto siempre daría como resultado un error (probablemente porque .gu-transit no está en el DOM antes de que se llame a este oyente)

¡Cualquier comentario sería apreciado!