JSFiddle - React, Tailwind, and code Playground

by enyojs

CSS

.normal {
    background:lightblue; 
    padding: 10px;
}
.down {
    color:red;
    font-weight:bold;
}
.drag {
    background: orange;
    color: white;
}
.lulu.drag {
    color: pink;
}

JavaScript

enyo.kind({
    name: "MySample",
    components: [
        {content:"Content", classes:"normal drag lulu", ondown:"down", onup:"up", ondragstart:"start", ondragfinish:"end"},
        {kind:"onyx.ToggleButton", onChange:"change"}
    ],
    down: function() {
        this.$.control.addClass("down");
    },
    up: function() {
        this.$.control.removeClass("down");
    },
    start: function() {
        this.$.control.addClass("drag");
    },
    end: function() {
        this.$.control.removeClass("drag");
    },
    change: function() {
        this.$.control.addRemoveClass("lulu", this.$.toggleButton.getValue());
    }
});

new MySample({fit:true}).write();