JSFiddle - React, Tailwind, and code Playground

by mariomc

CSS

html {
                height: 100%;
            }

            body {
                background-color: #000;
                color: #FFF;
                position: relative;
                overflow: hidden;
                height: 100%;
                width: 100%;
            }

            .quadrado {
                width: 100px;
                height: 100px;
                position: absolute;
                background-color: red;
                display: block;
            }

            .dragging {
                cursor: move;
                z-index: 9001;
            }

JavaScript

(function(){
    var dragging_element = false;
    function randomColor(){
        // como raio transformo isto em hexa?
        // No need. RGB to the rescue!
        var colors = [];
        colors[0] = Math.floor(Math.random() * 255);
        colors[1] = Math.floor(Math.random() * 255);
        colors[2] = Math.floor(Math.random() * 255);
        return colors;
    }
    // Criar quadrado
    function criarQuadrado(x, y) {
        // Esqueci-me de como se clona elementos
        var quadrado = document.createElement('div');
        var colors = randomColor();
        quadrado.className = "quadrado";
        moverQuadrado(quadrado, x , y );
        quadrado.style.backgroundColor = 'rgb('+colors.toString()+')';
        // AppendChild, not append...
        document.body.appendChild(quadrado);
    }
    // Mover Quadrado
    function moverQuadrado(quadrado, x, y) {
        quadrado.style.top = (y - 50) + 'px';
        quadrado.style.left = (x - 50) + 'px';
    }
    // Remover Quadrado
    function removerQuadrado(quadrado){
        quadrado.remove();
    }

    // alias para binding de eventos
    function bind(element, event, callback){
        // if we have dom level 2
        if(element.addEventListener){
            element.addEventListener(event, callback, false);
            return true;
        } else {
            element.attachEvent('on'+event, callback);
            return false;
        }
    }

    // Event Handlers
    function clickHandler(event){
        var target = event.target || event.srcElement;
        // Tenho de verificar na consola qual a propriedade x e y do evento
        if(target.className.indexOf('quadrado') > -1) {
            target.className = 'quadrado';
        } else {
            // X e Y estao nas propriedades clientX e clientY do event ? 
            var x = event.x || event.clientX;
            var y = event.y || event.clientY;
            criarQuadrado(x, y);
        }
    }

    function mouseDownHandler(event){
       ...