Drag&drop ChartJS charts make them disappear

46 Views Asked by At

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/[email protected]/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>

0

There are 0 best solutions below