JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="dataCard">Data Card</div><br/>
<div id="start"></div>
<div id="end"></div>
<div id="distance"></div>

CSS

.dataCard
{
    cursor:pointer;
    width:100px;
}

JavaScript

$('.dataCard').draggable({ axis: 'x', 
                          revert: function() {
                              //determine the start/end positions
                              var end = $(this).position().left;
                              var start = $(this).data('start');
                              //subtract end and start to get the (absolute) distance
                              var distance = Math.abs(end - start);
                              var width = $(this).width();
                              //display the end and distance covered
                              $('#end').html('End: ' + end);
                              $('#distance').html('Distance: ' + distance);
                              //if the distance is more than 80% of the width don't revert
                              if(distance > (width * .8))
                              {
                                  return false;
                              }
                              //else revert
                              return true;
                          },
                          start: function(){
                              //get the start distance based on position
                              var distance = $(this).position().left;
                              //store the start position
                              $(this).data('start', distance);
                              //display the start distance
                              $('#start').html('Start: ' + distance);
                         }
});