JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<div id="wrapper">
    <div id="origin" class="fbox">
        <img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
        <img src="http://placehold.it/150x100" id="two" title="two" class="draggable" />
        <img src="http://placehold.it/160x100" id="three" title="three" />
    </div>
    <p>test</p>
    <div id="drop" class="fbox"></div>
</div>

CSS

#origin {
    background-color: lightgreen;
}
#origin img, #drop img {
    margin-top: 3px;
    margin-left: 5px;
}
#drop {
    background-color: red;
    min-height: 120px;
}
.over {
    border: solid 5px purple;
}
.draggable {
    border: solid 2px gray;
}

JavaScript

$("#one").data("fullImageSrc", "http://cdn.asriran.com/files/fa/news/1389/10/27/162857_203.jpg");
$("#two").data("fullImageSrc", "http://far30.net/wp-content/uploads/2012/05/03.jpg");
$(".draggable").draggable({
    cursor: "crosshair",
    revert: "invalid"
});
$("#drop").droppable({
    accept: ".draggable",
    drop: function (event, ui) {
        console.log("drop");
        $(this).removeClass("border").removeClass("over");
        var dropped = ui.draggable;
        var droppedOn = $(this);
        var fullImageUrl = $(dropped).data("fullImageSrc");
        var imgSrc = $(dropped).attr("src");
        if (!$(this).is($(dropped).parent())) {
            $(dropped).detach().css({
                top: 0,
                left: 0
            }).hide().attr("src", fullImageUrl).data("fullImageSrc", imgSrc).load(function () {
                $(this).show();
            }).appendTo(droppedOn).droppable("option", "disabled", true);
        }
    },
    over: function (event, elem) {
        $(this).addClass("over");
        console.log("over");
    },
    out: function (event, elem) {
        $(this).removeClass("over");
    }
});
$("#drop").sortable();
$("#origin").droppable({
    accept: ".draggable",
    drop: function (event, ui) {
        console.log("drop");
        $(this).removeClass("border").removeClass("over");
        var dropped = ui.draggable;
        var droppedOn = $(this);
        var fullImageUrl = $(dropped).data("fullImageSrc");
        var imgSrc = $(dropped).attr("src");
        $(dropped).detach().css({
            top: 0,
            left: 0
        }).appendTo(droppedOn);
    }
});