JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class="drag">
    <img class="yes" src="https://lh4.googleusercontent.com/-RGVoCNFWvhE/AAAAAAAAAAI/AAAAAAAAAAA/mJa2Oi_kDmg/photo.jpg" />
    <img class="yes" src="https://lh4.googleusercontent.com/-RGVoCNFWvhE/AAAAAAAAAAI/AAAAAAAAAAA/mJa2Oi_kDmg/photo.jpg" />
    <img class="yes" src="https://lh4.googleusercontent.com/-RGVoCNFWvhE/AAAAAAAAAAI/AAAAAAAAAAA/mJa2Oi_kDmg/photo.jpg" />
    <img class="yes" src="https://lh4.googleusercontent.com/-RGVoCNFWvhE/AAAAAAAAAAI/AAAAAAAAAAA/mJa2Oi_kDmg/photo.jpg" />
    <img src="https://lh4.googleusercontent.com/-RGVoCNFWvhE/AAAAAAAAAAI/AAAAAAAAAAA/mJa2Oi_kDmg/photo.jpg" />
    <img src="https://lh4.googleusercontent.com/-RGVoCNFWvhE/AAAAAAAAAAI/AAAAAAAAAAA/mJa2Oi_kDmg/photo.jpg" />
</div>
<div class="drop">
    <div class="yes"></div>
    <div class="no"></div>
    <div class="yes"></div>
    <div class="no"></div>
    <div class="yes"></div>
    <div class="no"></div>
    <div class="yes"></div>
    <div class="no"></div>
    <div class="yes"></div>
    <div class="no"></div>
</div>

CSS

.drag img {
    width:100px;
    height:auto;
}
.drop div {
    width:200px;
    height:200px;
    border:1px solid black;
    display:inline-block;
}

JavaScript

$(document).ready(function () {
    $('.drag img').draggable({
        revert: 'invalid',
    });
    $('.drop div').droppable({
        accept: '.yes'
    });
});