Tengo diferentes div en mi cuerpo HTML (algunos de ellos con gráficos) y quiero poder arrastrar y soltar estos div para reorganizarlos. Encontré Dragula que funciona bastante bien, pero cuando arrastro y suelto div con un gráfico dentro, el gráfico desaparece.
Solo encontré complementos para arrastrar y soltar datos dentro de los gráficos cuando busqué esto en Google.
Aquí hay una muestra de código, pero el archivo completo tiene 10 divs: 4 con gráficos chartJS, 3 con indicadores gaugeJS (que funcionan bien cuando se arrastra y suelta) y 2 con elemento HTML básico (h3 y h4) sin ningún problema tampoco.
let graphItop2 = new Chart(document.getElementById("ticket"), { type: "pie", data: {labels: ["Blue", "Purple"], datasets: [{ data: [1, 1], backgroundColor: ["blue", "purple"], }] }, }); dragula([document.querySelector("body")]) /* This comes from dragula's github */ .gu-mirror { position: fixed !important; margin: 0 !important; z-index: 9999 !important; opacity: .8 } .gu-hide { display: none !important } .gu-unselectable { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important } .gu-transit { opacity: .2 } /* This is mine */ body { color: #000; background-color: #f0f0f0; display: flex; align-content: stretch; flex-wrap: wrap; margin: 18px; grid-gap : 10px } .case { position: relative; padding: 10px; text-align: center; border-radius: 10px; background-color: #fff; } h2 { margin: 0; padding: 10px 20px; border-radius: 10px; background-color: lightgray } <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.6/dragula.min.js"></script> <div class="case ticket"> <h2>Tickets</h2> <canvas height="200" id="ticket" width="200"></canvas> </div> <div class="case random"> <h2>Random</h2> <p>This is random text</p> </div>