JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<script src="http://rawgithub.com/jquery/jquery-ui/master/tests/jquery.simulate.js"></script>
<div id="src">src</div>
<div id="dst">dst</div>

<div id="draggable"></div>

CSS

#draggable {
    width: 50px;
    height: 50px;
    border: 1px solid black;
    background-color: gray;
}

#src {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0px;
    top: 0px;
    background-color: green;
    line-height: 200px;
    text-align: center;
    opacity: 0.5;
}

#dst {
    position: absolute;
    width: 300px;
    height: 200px;
    left: 125px;
    top: 0px;
    background-color: red;
    line-height: 200px;
    text-align: center;
    opacity: 0.5;
}

#dst.dst-over {
    background-color: blue;
}

#draggable.acceptable {
    background-color: red;
}

JavaScript

var drag, src, dst;

function dst_over(event, ui) {
    console.log('dst_over');
    dst.addClass('dst-over');
}

function src_out(event, ui) {
    ui.draggable.addClass('acceptable');
}

drag = $( "#draggable" ).draggable({ refreshPositions: true });
src = $( "#src" ).droppable({ out: src_out });
dst = $( "#dst" ).droppable({ over: dst_over });

drag.simulate('drag', {dx: 1, dy: 1});

dst.droppable( "option", "accept", ".acceptable" );

// Move gray box from src to dst (which deliberately overlap).
// dst_over will not be called.
// Dragging outside of dst and back in again is required.