drag and drop with canvas image

by Richard Hunter

HTML

<div 
  id="foo"
  draggable="true" 
  class="foo">
  foo
</div>

<canvas id="red" width="20" height="20"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<canvas id="green" width="20" height="20"
style="border:1px solid green">
Your browser does not support the canvas element.
</canvas>

<div 
id="bar"
class="bar">
  bar
</div>
<div 
id="meh"
class="meh">
  meh
</div>

CSS

.foo {
  background: lightblue;
  padding: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 10px;
}

.bar, .meh {

  padding: 10px;
  height: 50px;
  width: 50px;
  display: inline-block;
}
.bar {
    background: pink;
}
.meh {
    background: coral;
}

JavaScript

var canvas1 = document.getElementById("red");
var ctx = canvas1.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 20, 20);

var canvas2 = document.getElementById("green");
var ctx = canvas2.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 20, 20);

foo.addEventListener('dragstart', (event) => {
	event.dataTransfer.setData('text/plain', 'this is foo');
  
  event.dataTransfer.setDragImage(canvas2, 10, 10);
});

bar.addEventListener('dragenter', (event) => {
	//event.preventDefault();
	//console.log('dragenter');
});

bar.addEventListener('dragover', (event) => {
	event.preventDefault();
});

meh.addEventListener('drop', (event) => {
	const data = event.dataTransfer.getData('text/plain');
  console.log('meh drop')
});

meh.addEventListener('dragover', (event) => {
	event.preventDefault();
});

bar.addEventListener('drop', (event) => {
	const data = event.dataTransfer.getData('text/plain');
	console.log('drop', data);
});

foo.addEventListener('dragend', () => {
	//console.log('drag end');
});