JSFiddle - React, Tailwind, and code Playground

by nachiket

HTML

<div id="container">
    <div class="item">
        <i>1</i>
        <span>Label 1</span>
    </div>
    <div class="item">
        <i>2</i>
        <span>Label 2</span>
    </div>
    <div class="item">
        <i>3</i>
        <span  data-level="1">Label 3</span>
    </div>
    <div class="item" >
        <i>4</i>
        <span data-level="2">Label 4</span>
    </div>
    <div class="item">
        <i>5</i>
        <span>Label 5</span>
    </div>    
</div>

CSS

.item span { position: relative; width: 310px; border: 1px solid #ccc; display: inline-block; }
.item span.level-0{width:310px;}
.item span.level-1{width:260px;}
.item span.level-2{width:210px;}
.item span.level-3{width:160px;}

JavaScript

var TOC = {};
TOC.Item = new Class({
    Implements: [Options, Events],
    options: {
        levelAttr:'data-level',
        levelCount: 4,
        levelPixels: 50,
        classPrefix: 'level-'        
    },
    level: 1,
    levels: undefined,
    prevItem: undefined,
    nextItem: undefined,
    modified: false,
    initialize: function(el, prevItem, options){
        this.setOptions(options);
        this.el = el;
        this.prevItem = prevItem;
        this._setDrag();
        this._setLevels(); 
    },
    init: function(){       
        var level = this.el.getAttribute(this.options.levelAttr);
        this.setLevel(level?String.toInt(level):0);
        this.calculateParent();
        this.modified = false;
        if(!this.prevItem) {
            this.setLimit(0,0);
        }
    },
    setNextItem: function(nextItem){
        this.nextItem = nextItem;
    },
    _setDrag: function(){
        this.dragEl = this.el;//.getChildren().getLast();
        this.drag = new Drag(this.dragEl, {
            snap: 10,
            grid: 50,
            modifiers: {x: 'left', y:false},
            onSnap: function(el, i){
                this.el.addClass('dragging');
            }.bind(this),
            onDrag: this._dragHandler.bind(this),
            onComplete: function(el){
                el.removeClass('dragging');
            }.bind(this)
        });
    },
    _dragHandler: function(el){
        var left = this.dragEl.getStyle('left');
        var levelVal = String.toInt(left.substr(0, left.length-2));
        var level = this.levels.indexOf(levelVal);
        if(this.level!=level) {
            this.setLevel(level);
            this.calculateParent();
            this.calculateChildrenLimits();
            this.fireEvents();
            console.log("Level changed to ", level);
        }
    },
    _setLevels: function(){
        this.levels = [];
        for(var i=0; i<this.options.levelCount; i++) {
            this.levels.push(this.options.levelPixels...