JSFiddle - React, Tailwind, and code Playground

by SkeLLLa

HTML

<ul id="items">
    <li class="item">
        <span>Item 1</span>
    </li>
    <li class="item">
        <span>Item 2</span>
    </li>
    <li class="item">
        <span>Item 3</span>
    </li>
    <li class="item">
        <span>Item 4</span>
    </li>
    <li class="item">
        <span>Item 5</span>
    </li>
    <li class="item">
        <span>Item 6</span>
    </li>
</ul>
<ul id="cart">
    <div class="info">Drag Items Here</div>
</ul>

CSS

#items {
    float: left;
    border: 1px solid #F9F9F9;
    width: 525px;
}

.item {
    background-color: #FFF;
    background-position: left top;
    background-repeat: no-repeat;
    border: 1px solid #EEE;
    border-bottom: 2px solid #DDD;
    border-right: 2px solid #DDD;
    cursor: move;
    float: left;
    height: 50px;
    margin: 10px;
    position: relative;
    width: 150px;
}
    .item span {
        bottom: 0;
        font-size: 8px;
        font-weight: bold;
        left: 0;
        position: absolute;
        text-align: center;
        width: 100%;
    }

#cart {
    background-color: #FFF;
    border: 1px solid #F9F9F9;
    float: right;
    padding-bottom: 50px;
    width: 195px;
}
    #cart .info {
        color: #444;
        font-size: 9px;
        font-weight: bold;
        text-align: center;
    }
    #cart .item {
        background-position: 50% -22px;
        border-width: 1px;
        cursor: default;
        height: 50px;
        margin: 5px;
        width: 190px;
    }

JavaScript

window.addEvent('domready', function(){
        $$('.item').addEvent('mousedown', function (event) {
            event.stop();

            // `this` refers to the element with the .item class
            var shirt = this;

            var clone = shirt.clone().setStyles(shirt.getCoordinates()).setStyles({
                opacity: 0.7,
                position: 'absolute'
            }).inject(document.body);

            var drag = new Drag.Move(clone, {

                droppables: $('cart'),

                onDrop: function (dragging, cart) {
                    dragging.destroy();

                    if (cart != null) {
                        shirt.clone().inject(cart);
                        cart.highlight('#7389AE', '#FFF');
                    }
                    new Sortables(cart);
                },
                onEnter: function (dragging, cart) {
                    cart.tween('background-color', '#98B5C1');
                },
                onLeave: function (dragging, cart) {
                    cart.tween('background-color', '#FFF');
                },
                onCancel: function (dragging) {
                    dragging.destroy();
                }
            });
            drag.start(event);

        });
    });