HTML 5 Drag and Drop API - Losing Chart JS content when switching - html

Question

I have a simple application that shows some charts. I want the user to be able to move the charts around on the screen. I have utilized the drag and drop API to try and achieve this, and it is working for the text that is included in the div container, but unfortunately, when it drops, I lose the chart and its information.
I have tried playing around utilising different meme types but I have been unsuccessful. Perhaps the drag and drop API cannot achieve this?
var ctx = document.getElementById("barChart1");
var barChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Dog", "Cat", "Pangolin"],
datasets: [{
backgroundColor: '#00ff00',
label: '# of Votes 2016',
data: [12, 19, 3]
}]
}
});
var ctx = document.getElementById("barChart2");
var barChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Dog", "Cat", "Pangolin"],
datasets: [{
backgroundColor: '#ddd',
label: '# of Votes 2016',
data: [12, 19, 3]
}]
}
});
document.addEventListener('DOMContentLoaded', (event) => {
var dragSrcEl = null;
function handleDragStart(e) {
this.style.opacity = '0.4';
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'move';
return false;
}
function handleDragEnter(e) {
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over');
}
function handleDrop(e) {
if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from redirecting.
}
if (dragSrcEl != this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
function handleDragEnd(e) {
this.style.opacity = '1';
items.forEach(function(item) {
item.classList.remove('over');
});
}
let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart, false);
item.addEventListener('dragenter', handleDragEnter, false);
item.addEventListener('dragover', handleDragOver, false);
item.addEventListener('dragleave', handleDragLeave, false);
item.addEventListener('drop', handleDrop, false);
item.addEventListener('dragend', handleDragEnd, false);
});
});
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: 0.5em;
padding: 10px;
cursor: move;
}
.box.over {
border: 3px dotted #666;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class='container'>
<div draggable="true" class="box">
<h3>Chart 1</h3>
<canvas id="barChart1" width="10px" height="10px"></canvas>
</div>
<div draggable="true" class="box">
<h3>Chart 2</h3>
<canvas id="barChart2" width="10px" height="10px"></canvas>
</div>
</div>