JSFiddle - React, Tailwind, and code Playground

by sergey77

HTML

<script src="http://microsoft.cs.msu.su/events/courses/data/rx.js"></script>
<script src="http://microsoft.cs.msu.su/events/courses/data/rx.jquery.js"></script>
<html>
    <div id="draggable" style="background: cyan; width: 40px; height: 40px; position: absolute; left: 100px; top:100px">Drag me!</div>
<html>

JavaScript

var draggable = $("#draggable");

var mouseMove = draggable.toObservable("mousemove");
var mouseUp = draggable.toObservable("mouseup");
var mouseDown = draggable.toObservable("mousedown");

var deltas = mouseDown.
    SelectMany(function() {
        return mouseMove.
            Skip(1).Zip(mouseMove, function (left, right) {
            return {
                dx: left.clientX - right.clientX,
                dy: left.clientY - right.clientY
            };
        }).TakeUntil(mouseUp);
    });

deltas.Subscribe(function(e)
{
    draggable.css({
        left: parseFloat(draggable.css("left")) + e.dx + "px",
        top: parseFloat(draggable.css("top")) + e.dy + "px"
    });
});