JSFiddle - React, Tailwind, and code Playground

by ninadpachpute

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://threedubmedia.googlecode.com/files/jquery.event.drag-2.0.js"></script>

<script type="text/javascript" src="http://wayfarerweb.com/js/jquery.easing.js"></script>
<script type="text/javascript" src="http://wayfarerweb.com/js/animadrag.js"></script>

<table>
<tr><td>Row-1</td></tr>
<tr><td>Row-2</td></tr>
<tr><td>Row-3</td></tr>
<tr><td>Row-4</td></tr>
<tr><td>Row-5</td></tr>
</table>

<p class="originalY"></p>
<p class="offsetY"></p>

<script>
$('tr-disable').drag(
  function(ev,dd) {
    str = "";
    str = dd.originalY;
    str += dd.offsetY;
    $(this).css({'top':'str'});
    $('.originalY').text(str);
    $('.offsetY').text(dd.offsetY);
  }
);
</script>

<script>
$(document).ready(function() {
  document.body.onselectstart = function() { return false; };
  $('tr').animaDrag();
});
</script>

CSS

table { width:96%; margin:2%; }
tr { background-color:#888; }
tr:hover { cursor:move; }
td { padding:5px 10px; background-color:#ccc; }