I have different div in my HTML body (some of them with charts) and I want to be able to drag&drop these div to re-organise them. I found Dragula which work pretty well but when I drag&drop div with a chart inside, the chart disappear.
I only found plugins to drag&drop data inside the charts when I searched for this on google.
Here's a code sample but the whole file have 10divs : 4 with chartJS charts, 3 with gaugeJS gauges (which work well when drag&drop) and 2 with basic HTML element (h3 and h4) without any problem neither.
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>