JSFiddle - React, Tailwind, and code Playground

by jamygolden

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<div class="placeholder" id="placeholder1"></div>
<div class="placeholder" id="placeholder2"></div>
<div class="placeholder" id="placeholder3"></div>
<hr />
<div class="placeholder" id="original-position">

<div class="chocolate" id="snickers"></div>
<div class="chocolate" id="twix"></div>
<div class="chocolate" id="toblerone"></div>
    
</div>

CSS

.placeholder, .chocolate { background-color: #fff; background-repeat: no-repeat; float: left; height: 270px; width: 280px; }
#placeholder1 { background-image: url(http://css-plus.com/temp/1.jpg); }
#placeholder2 { background-image: url(http://css-plus.com/temp/2.jpg); }
#placeholder3 { background-image: url(http://css-plus.com/temp/3.jpg); }

hr { clear: both; }

#snickers { background-image: url(http://css-plus.com/temp/snickers.jpg); }
#twix { background-image: url(http://css-plus.com/temp/twix.jpg); }
#toblerone { background-image: url(http://css-plus.com/temp/toblerone.jpg); }

#original-position { background: none; height: 300px; width: 100%; }

JavaScript

$(".chocolate").draggable({ 
    greedy: false, 
    revert: "invalid", 
    snap: '.placeholder', 
    snapMode: 'inner'
});
$('.placeholder').droppable();