JSFiddle - React, Tailwind, and code Playground

by arjuncc

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css">
<div id="wrapper">
<div id="dropzone"><p>Drop here!</p></div>
<div id="pix">
    <img id="bild1" src="http://creativisual.de/test/1.gif" />
    <img id="bild2" src="http://creativisual.de/test/2.gif" />
    <img id="bild3" src="http://creativisual.de/test/3.gif" />
    <img id="bild4" src="http://creativisual.de/test/4.gif" />
    <br class="clr" />
</div>
<br class="clr" />
</div>

CSS

#dropzone{
    background: #DDD;
    width: 300px;
    height: 300px;
    float: left;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 10px solid black;
}
#testing.over{
    display: block;  
}
#testing{
    position: absolute; 
    top: 0px; 
    right: 0px;
    display: none; 
    cursor: pointer;
}
#wrapper{
    padding: 0 0 0 320px;
    position: relative;
    margin: 20px 0 0 20px;
}
#dropzone.ui-drop-hover{
     border-color: #FF0;   
}
#dropzone p{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 300px;
    text-align: center;
    padding: 0 0 30px;
}
#pix{
    margin: 0 0 0 20px;
    float: left;
    width: 150px;
}
#pix img{
    float: left;
}
.clr{
    clear: both;
}
body{
    margin: 0px;   
}
.ui-state-disabled{
     opacity: 0.25;   
}
.ui-icon{
    width: 16px;
    height: 16px;
    background: url(http://palmenhandel-witten.de/img/handle2.png);
}
.ui-icon-gripsmall-diagonal-se{
    background-position: right bottom;
}
.ui-resizable-se{
     right: 0;
     bottom: 0;  
}

JavaScript

$("#dropzone").droppable({
    hoverClass: "ui-drop-hover",
    tolerance: "fit",
    drop: function(event, ui) {
        $("#dropzone p").hide();
        $("#pix img").draggable("disable").hover(function() {
            $(this).css({
                cursor: "default"
            });
        });
    }
});

$("#pix img").draggable({
    cursor: "move",
    revert: "invalid",
    helper: "clone",
    stop: function(event, ui) {
        if ($("#dropzone p").is(":hidden")) {
            $(ui.helper).clone().appendTo($("#dropzone"));
            var dp = $("#dropzone img.ui-draggable").position();

            var dzh = $("#dropzone").height();
            var dzw = $("#dropzone").width();
            var dh = $(ui.helper).height();
            var dw = $(ui.helper).width();
            var bw = parseInt($("#dropzone").css("borderTopWidth"), 10);
            var top_offset = (dp.top < bw ? bw - dp.top - bw : (dp.top + dh > dzh + bw ? (dzh + bw) - (dp.top + dh) - bw : -bw));
            var left_offset = (dp.left < bw ? bw - dp.left - bw : (dp.left + dw > dzw + bw ? (dzw + bw) - (dp.left + dw) - bw : -bw));
            $("#dropzone img.ui-draggable").css({
                top: dp.top + top_offset,
                left: dp.left + left_offset
            });
            $("#dropzone img.ui-draggable").resizable({
                handles: 'se',
                maxHeight: 200,
                minHeight: 25,
                aspectRatio: true,
                ghost: true,
                autoHide: true,                
                stop: function(event, ui) {
                    var ximg = ui.position.left + ui.size.width;
                    var xdrop = $("#dropzone").offset().left + $("#dropzone").width();
                    var yimg = ui.position.top + ui.size.height;
                    var ydrop = $("#dropzone").offset().top + $("#dropzone").height();
                    if (ximg > xdrop || yimg > ydrop) {
                        $(this).position({
                 ...