JSFiddle - React, Tailwind, and code Playground

by andrewwhitaker

HTML

<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/pepper-grinder/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.7/jquery-ui.min.js"></script>
<div id="blue" class="valid">
    <div id="red-one" class="red"></div>
    <div id="red-two" class="red"></div>
</div>

<div id="green-container">
    <div id="green-one" class="green">
    </div>
    <div id="green-two" class="green">
    </div>
</div>

CSS

.red { 
    width:150px; 
    height:75px;
    float: left;
    clear: both;
    background-color: red;
    margin: 25px;
}
#blue { 
    height: 250px; 
    background-color: blue;
    opacity: 0.5;
    padding: 25px;
    width: 200px;
    float:left;
}

.green {
    height: 150px;
    width: 200px;
    background-color:green;
    float:left;
    margin-bottom: 30px;
}

#green-container { 
    width: 100px; 
    float:left;
    margin-left: 300px;
    padding: 25px;
}

JavaScript

function isInside(one, other) {
    return one.offset().left >= other.offset().left && 
        one.offset().top >= other.offset().top && 
        one.offset().top + one.height() <= other.offset().top + other.height() && 
        one.offset().left + one.width() <= other.offset().left + other.width();
}

$("#blue").draggable({
    drag: function(event, ui) {
        var $this = $(this);
        var $reds = $this.children(".red");
        var $greens = $("#green-container").children(".green");
        var firstRed = $reds.first();
        var firstGreen = $greens.first();
        var secondRed = $reds.last();
        var secondGreen = $greens.last();

        if (isInside(firstRed, firstGreen) && isInside(secondRed, secondGreen)) {
            $this.addClass('valid');
        }
        else {
            $this.removeClass('valid');
        }        
    },
    revert: 'invalid'
});


$("#green-container").droppable({ accept: ".valid" });