title: Drag&drop ChartJS charts make them disappear
body: <p>I have different div in my HTML body (some of them with charts) and I want to be able to drag&amp;drop these div to re-organise them. I found Dragula which work pretty well but when I drag&amp;drop div with a chart inside, the chart disappear.</p>
  <p>I only found plugins to drag&amp;drop data inside the charts when I searched for this on google.</p>
  <p>Here's a code sample but the whole file have 10divs : 4 with chartJS charts, 3 with gaugeJS gauges (which work well when drag&amp;drop) and 2 with basic HTML element (h3 and h4) without any problem neither.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let graphItop2 = new Chart(document.getElementById("ticket"), {
              type: "pie",
              data: {labels: ["Blue", "Purple"],
                  datasets: [{
                      data: [1, 1],
                      backgroundColor: ["blue", "purple"],
                  }]
              },
          });
  
  dragula([document.querySelector("body")])</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.6/dragula.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="case ticket"&gt;
      &lt;h2&gt;Tickets&lt;/h2&gt;
      &lt;canvas height="200" id="ticket" width="200"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;div class="case random"&gt;
      &lt;h2&gt;Random&lt;/h2&gt;
      &lt;p&gt;This is random text&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>