JSFiddle - React, Tailwind, and code Playground

by g33ky

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="trash" class="out"> <span>Trash</span>

</div>
<div id="items">
    <div class="item"><span>Item 1</span>

    </div>
    <div class="item"><span>Item 2</span>

    </div>
    <div class="item"><span>Item 3</span>

    </div>
</div>

CSS

body {
    font: bold 12px arial;
}
span {
    float: left;
    margin-top: 17px;
    text-align: center;
    width: 100%;
}
#trash, #items, .item {
    height: 50px;
    width: 50px;
}
#trash {
    color: #354e62;
}
#items {
    margin-top: 10px;
    width: 100%;
}
.item {
    background: #cdcdcd;
    color: #3b3b3b;
    float: left;
    margin-right: 10px;
    cursor: move;
}
.over {
    background-color: #cedae3;
}
.out {
    background-color: #a6bcce;
}

JavaScript

$(function () {
    $(".item").draggable({
        revert: true
    });
    $("#trash").droppable({
        tolerance: 'touch',
        over: function () {
            $(this).removeClass('out').addClass('over');
        },
        out: function () {
            $(this).removeClass('over').addClass('out');
        },
        drop: function () {
            var answer = confirm('Permantly delete this item?');
            $(this).removeClass('over').addClass('out');
        }
    });
});