JSFiddle - React, Tailwind, and code Playground

by jwanga

HTML

<div id>
    <div>

JavaScript

Ext.onReady(function () {
    var column1, column2, widget;
    widget = Ext.panel.Panel({
        width: 50,
        height: 50,
        title: 'widget',
        style: {
            borderColor: 'blue',
            borderStyle: 'solid'
        },
        draggable: {
            moveOnDrag: false
        }
    });

    column1 = new Ext.panel.Panel({
        layout: {
            type: 'hbox'
        },
        width: 150,
        height: 150,
        style: {
            borderColor: 'red',
            borderStyle: 'solid'
        },
        items: [widget]
    });

    column2 = new Ext.panel.Panel({
        layout: {
            type: 'hbox'
        },
        width: 150,
        height: 150,
        items: ['widget'],
        style: {
            borderColor: 'red',
            borderStyle: 'solid'
        },

        afterRender: function () {
            Ext.Container.prototype.afterRender.apply(this, arguments);

            var element = this.dropTarget = this.body;

            this.dd = Ext.create('Ext.dd.DropTarget', element, {
                //ddGroup : 'widgets',
                notifyOver: function (dd, e, data) {
                    console.log('NotifyOver', dd, e, data);
                },
                notifyDrop: function (dd, e, data) {
                    console.log('NotifyDrop', dd, e, data);
                },
                notifyOut: function (dd, e, data) {
                    console.log('NotifyOut', dd, e, data);
                },
                notifyEnter: function (dd, e, data) {
                    console.log('NotifyEnter', dd, e, data);
                }
            });
        }
    });

    Ext.application({
        name: 'drag',
        launch: function () {
            Ext.create('Ext.container.Viewport', {
                width: 400,
                height: 400,
                layout: 'hbox',
                items: [column2]
            });
        }
    });
});