JSFiddle - React, Tailwind, and code Playground

by EDWIN MAURICIO QUISHPE MALDONADO

CSS

.box{
    width:48px;
    height: 48px;
    min-height: 48px;
    background-color: #333;
    margin: 2px;
    border: 2px solid #333;
    border-radius: 5px;
    cursor: move;
}
.big-box{
    width:96px;
    height: 96px;
    min-height: 96px;
    border: 2px dotted red;
    margin: 2px;
    padding: 16px;
}
.droppable{
    transition: all 0.4s;
    background:olive;
}
.over{
    /*box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.4);
    -webkit-transform: scale(0.9);*/
    border: 3px dashed white;
}

JavaScript

enyo.ready(function() {
    enyo.kind({
        kind: "FittableRows",
	    classes: "enyo-fit enyo-unselectable",
        name: "AppDrag",
        ondragstart: "dragstart",
        ondrop: "droppable",
        components: [
            {kind: "onyx.Toolbar", content: " ENYO Dragable see console.log "},
            {kind: "enyo.Panels", style:" height:150px;",
             components: [
                {style:"background:orange;", components:[
                 {kind: "FittableColumns", components:[                            
                     {kind: "box",
                      name:"cuadro",
                      ondrag:"ondrag",
                      ondragstart: "dragstart",
                      ondragend: "dragFinish",
                     }
                   ]},
                ]},
		    ]},
            {kind: "enyo.Panels", realtimeFit: true, style:" height:220px;",components: [
                    {content:1, classes:"droppable",
                //style:"background:olive;",
                name: "panel1",
                //ondragover : "dragover",
                ondrop:"droppable",
                ondragover:"dropover",  
                //ondragout: "dragout",
                //ondragenter:"dragenter",
                //ondragleave: "dragleave",
                components:[
                    //{content:"droppable", attributes:{draggable:"true"}}
                ]}
		    ]}
        ],
        create: function(inSender, inEvent){
            this.inherited(arguments);
            this.addHandlers();
        },
        dragstart: function(inSender, inEvent){
             if(!inEvent.dataTransfer){
                return true;
            }
            console.log("inicia el drag");
            var newNodo = inEvent.originator;
            //console.log(newNodo);
            var data = {};
    		data.kind = newNodo.kind;
		    data.file = newNodo.file;
            //data.file.service.owner = null;
            var dataText =...