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
var ImmagineDrag = null;
$(".myDiv").draggable({
start: function() {
ImmagineDrag = $(this);
},
drag: function() {
currentImageX = ImmagineDrag.position().top;
$('#score').html(currentImageX);
},
stop: function() {
if (currentImageX > 200) {
ImmagineDrag.css({
'top': '0',
'left': '0'
});
}
}
});