canvas drag & drop

canvas drag & drop.carbide.md

canvas drag & drop

This Gist was automatically created by Carbide, a free online programming environment.

You can view a live, interactive version of this Gist here.(http://alpha.trycarbide.com/anonymous/43bfed20535afab51cded8da7b72087a).

cell0.js

if (document.getElementById('canvas')) {
    var canvas = document.getElementById('canvas');
} else {
    var canvas = document.createElement('canvas');
    canvas.id = 'canvas';
    document.body.appendChild(canvas);
}

if (document.getElementById('canvas2')) {
    var canvas2 = document.getElementById('canvas2');
} else {
    var canvas2 = document.createElement('canvas');
    canvas2.id = 'canvas2';
    document.body.appendChild(canvas2);
}
canvas2.width = 800;
canvas2.height = 300;

canvas.width = 800;
canvas.height = 300;
canvas.draggable = true;



function allowDrop(ev) {
    ev.preventDefault();
}

function drag(e) {
	console.log('abc', e);
    e.dataTransfer.setData("text", "SAMPLE TEXT");
    e.dataTransfer.dropEffect = "move";
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    console.log('Drop', data);
}

canvas2.addEventListener('dragover', allowDrop);
canvas2.addEventListener('drop', drop);

canvas.addEventListener('dragstart', drag);