JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/greenlaw110/knockout/raw/master/build/output/knockout-latest.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css">
<script src="https://github.com/greenlaw110/knockout-ext/raw/master/build/output/knockout-ext-latest.js"></script>
<div id="draggable" class="ui-widget-content" data-bind="event: {drag: drag}">
    <p>X: <span data-bind="text: x"> </span></p>
    <p>Y: <span data-bind="text: y"> </span></p>
</div>

CSS

#draggable { width: 150px; height: 150px; padding: 0.5em; }

JavaScript

var viewModel = {
    x: KO(0),
    y: KO(0),
    drag: function(model, event) {
        viewModel.x(event.pageX);
        viewModel.y(event.pageY);
        return true;
    }
};

ko.applyBindings(viewModel);

$( "#draggable" ).draggable();