JSFiddle - React, Tailwind, and code Playground

by braziel

HTML

<div class="totalCanvas" data-pagina="1" data-layoutfotos="2" data-layoutlinha="4" style="">
	<div class="canvasDivisao">
		<div data-canvas="1" class="canvas">
			<canvas ondragover='allowDrop(event)' ondrop='drop(this, event)' id="canvas1" width="383" height="383"></canvas>
		</div>
	</div>
	
	<div class="canvasDivisao">
		<div data-canvas="2" class="canvas">
			<canvas ondragover='allowDrop(event)' ondrop='drop(this, event)' id="canvas2" width="383" height="383"></canvas>
		</div>
	</div>
</div>

<div class="clear"></div>

<hr />

<img draggable="true" ondragstart="drag(this)" src="http://faraday.fc.up.pt/fis/Members/asrodrig/noticias/fisMed.jpg" alt="" width="150" height="150" />
<img draggable="true" ondragstart="drag(this)" src="http://autoreselivros.files.wordpress.com/2009/11/claude-levi-strauss.jpg" alt="" width="150" height="150" />

CSS

clear {clear:both;}


div.canvas {
    border: 1px solid #DDDDDD;
    float: left;
}

div.canvasDivisao {
    float: left;
    margin: 10px;
    padding: 5px;
    position: relative;
}

JavaScript

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

function drag(e) {
	dropArquivo = jQuery(e).attr('src');
	dataImg = jQuery(e);
}

function drop(e, ev) {
	var arquivo = '<img src="' + dropArquivo + '" id="imagem' + jQuery(jQuery(e).closest('.canvas')).attr('data-canvas') + '" style="display:none" />';
	imageToCanvas(jQuery(e).closest('.canvas'), arquivo, jQuery(jQuery(e).closest('.canvas')).attr('data-canvas'), ev);
	ev.preventDefault();
}

function imageToCanvas(objeto, arquivo, identificador, ev){
	ev.preventDefault();
	
	if( jQuery('#imagem' + identificador).length > 0 ) {
		jQuery('#imagem' + identificador).remove();
		jQuery(arquivo).appendTo(objeto);
	}else{
		jQuery(arquivo).appendTo(objeto);
	}
	
	var image = document.getElementById('imagem'+identificador);
	var canvas = document.getElementById('canvas'+identificador);
	var element = canvas.getContext("2d");
	
	element.clearRect(-image.width / 2 - 2, -image.width / 2 - 2, image.width + 4, image.height + 4);
    element.drawImage(image, 0, 0, jQuery(objeto).width(), jQuery(objeto).width() );
	
	jQuery( jQuery(objeto).find('canvas') ).attr({
		'data-width' : parseFloat( jQuery(objeto).find('canvas').width() ), 
		'data-height' : parseFloat( jQuery(objeto).find('canvas').width() ), 
		'data-top' : 0, 
		'data-right' : 0, 
		'data-bottom' : 0, 
		'data-left' : 0, 
		'data-scale' : 0, 
		'data-brilho' : 0, 
		'data-contraste' : 0
	});
}