JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://j-ulrich.github.com/jquery-simulate-ext/jquery.simulate.js"></script>
<script src="http://j-ulrich.github.com/jquery-simulate-ext/jquery.simulate.ext.js"></script>
<script src="http://j-ulrich.github.com/jquery-simulate-ext/jquery.simulate.drag-n-drop.js"></script>
<div id="draggable" class="ui-widget ui-widget-content">
 
  <p>Drag me to trigger the chain of events.</p>
 
  <ul class="ui-helper-reset">
    <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
    <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
    <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
  </ul>
</div>

<input type="text" id="toX" value="100" />
<input type="text" id="toY" value="100" />
<input type="button" id="drag" value="drag" />

CSS

#draggable {
      width: 16em;
      padding: 0 1em;
  }
  #draggable ul li {
      margin: 1em 0;
      padding: 0.5em 0;
  }
  * html #draggable ul li {
      height: 1%;
  }
  #draggable ul li span.ui-icon {
      float: left;
  }
  #draggable ul li span.count {
      font-weight: bold;
  }

JavaScript

var $start_counter = $("#event-start"),
    $drag_counter = $("#event-drag"),
    $stop_counter = $("#event-stop"),
    counts = [0, 0, 0];

$(function () {
    $("#draggable").draggable({
        axis: "x",
        cursor: "pointer",
        start: function () {
            counts[0]++;
            updateCounterStatus($start_counter, counts[0]);
        },
        drag: function () {
            counts[1]++;
            updateCounterStatus($drag_counter, counts[1]);
        },
        stop: function () {
            counts[2]++;
            updateCounterStatus($stop_counter, counts[2]);
        }
    });
});

function updateCounterStatus($event_counter, new_count) {
    // first update the status visually...
    if (!$event_counter.hasClass("ui-state-hover")) {
        $event_counter.addClass("ui-state-hover")
            .siblings().removeClass("ui-state-hover");
    }
    // ...then update the numbers
    $("span.count", $event_counter).text(new_count);
}

$('#drag').on('click', function () {
    dragTo(parseInt($('#toX').val()), parseInt($('#toY').val()))
});

function dragTo(x, y) {
    $("#draggable").simulate("drag-n-drop", {dx: x, dy: y, interpolation: { stepWidth: 1, stepDelay: 1}});
}