JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<div id="score"> </div>
<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv">3</div>
CSS
#score
{
height:50px;
}
.myDiv
{
width:40px;
height:40px;
margin:10px;
border:1px solid #000000;
float:left;
cursor:pointer;
text-align:center;
line-height:40px;
position:relative;
top:0;
left:0;
}
JavaScript
$(".myDiv").draggable({
start: function () {
ImmagineDrag = $(this);
},
drag: function () {
currentImageX = ImmagineDrag.position().top;
$('#score').html(currentImageX);
if(currentImageX > 200) {
ImmagineDrag.css({ 'top': '0', 'left': '0' });
return false;
}
},
stop: function () {
}
});