JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript">
    //new App().renderInto(document.body);
</script>

CSS

.box{
    width:48px;
    height: 48px;
    min-height: 48px;
    background-color: #333;
    margin: 2px;
    border: 2px solid #333;
    border-radius: 5px
}
.big-box{
    width:96px;
    height: 96px;
    min-height: 96px;
    border: 2px dotted red;
    margin: 2px;
    padding: 16px;
}

JavaScript

enyo.ready(function() {
    enyo.kind({
        kind: "FittableRows",
	    classes: "enyo-fit enyo-unselectable",
        name: "AppDrag",
        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: "BigBox",tittle: "native drag", components:[
                         {kind: "box"},                        
                     ]},
                            
                    
                    
                    {kind: "BigBox",ondrag: "drag",tittle:"enyo dragAvatar", components:[
                        {kind: "box"}
                     ]}
                   ]},
                ]},
		    ]},
            {kind: "enyo.Panels", realtimeFit: true, style:" height:220px;",components: [
                {content:1,
                style:"background:olive;",
                name: "panel1",
                ondragover : "dragover",
                ondrop:"droppable",
                ondragout: "dragout",
                components:[
                    {content:"droppable"}
                ]}
		    ]},
                        {name:"dragAvatar",
                         ondrag: "drag",
                         kind:"enyo.DragAvatar",
                         showing:false,
                         offsetX: -20,
                         offsetY: 20,
                         components: [
                             {kind:'enyo.Image',
                              src:'http://s9.postimage.org/h3t5cbidn/enyo_icon.jpg',
                              style: "max-width:60px;max-height: 60px;"
                             }
                         ]}
        ],
        create: function(inSender, inEvent){
            this.inherited(arguments);
        },
        drag: function(inSender, inEvent) {
       ...