JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<div class="demo">
    <ul id="sortable">
        <li class="list-item">
            <em href="#" class="sortable">First</em>
        </li>
        <li class="list-item">
            <em href="#" class="sortable">Second</em>
        </li>
        <li class="list-item">
            <em href="#" class="sortable">Third</em>
        </li>
        <li class="list-item">
            <em href="#" class="sortable">Fourth</em>
        </li>
    </ul>
</div>

CSS

.demo {
    background-color: #333;
    width: 498px;
}

#sortable {
    list-style: none;
    margin: 0;
    padding: 0;
}

#sortable li {
    background-color: #f6f6f6;
    border: 1px solid #ccc;
    padding: 5px;
    margin: 2px;
    display: block;
    width: 150px;
    height: 50px;
    float: left;
    position: relative;
    overflow: hidden;
}

#sortable li:hover {
    cursor: move;
}

#sortable li em {
    color: #1C94C4;
    font-weight: bold;
    text-decoration: none;
    font-family: georgia;
}

#sortable li .resize {
    position: absolute;
    right: 0px;
    bottom: 0px;
    opacity: 0;
    -webkit-transition: opacity 0.25s ease-in-out;
    -moz-transition: opacity 0.25s ease-in-out;
    -o-transition: opacity 0.25s ease-in-out;
}

#sortable li:hover .resize {
    opacity: 1;
}

#sortable li .resize-bottom { 
    width: 25px;
    height: 5px;
    border-bottom: 1px solid #999;
    cursor: s-resize;
}

#sortable li .resize-right {
    height: 25px;
    width: 5px;
    border-right: 1px solid #999;
    cursor: e-resize;
}

JavaScript

(function($) {
    $.fn.resize = function() {
        var
            WIDTH = 0,
            HEIGHT = 1,
            options = {
                speed: 500
            };
        this.each(function(){
            var
                resizing = false,
                sorting = false,
                mode = null,
                itemFocus = null;
            $(this).children().each(function(){
                var
                    item = $(this),
                    right = $('<a href="#" class="resize resize-right"></a>'),
                    bottom = $('<a href="#" class="resize resize-bottom"></a>');

                right.bind("mousedown", function(){
                    resizing = true;
                    mode = WIDTH;
                    itemFocus = item;
                    return false;
                });

                bottom.bind("mousedown", function(){
                    resizing = true;
                    mode = HEIGHT;
                    itemFocus = item;
                    return false;
                });

                item.append(
                    right, bottom
                );
            });

            $(document).bind("mousemove", function(evt) {
                if(resizing) {
                    if(mode == WIDTH) {
                        var
                            paddingLeft = parseInt(itemFocus.css("padding-left")),
                            paddingRight = parseInt(itemFocus.css("padding-right")),
                            offsetLeft = itemFocus.offset().left + (paddingLeft + paddingRight);
                        itemFocus.width(evt.clientX-offsetLeft);
                    }
                    if(mode == HEIGHT) {
                        var
                            paddingTop = parseInt(itemFocus.css("padding-top")),
                            paddingBottom = parseInt(itemFocus.css("padding-bottom")),
                            offsetTop = itemFocus.offset().top + (paddingTop + paddingBottom);
           ...