JSFiddle - React, Tailwind, and code Playground

by straeger

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs-jquery/1.1.6/rx.jquery.min.js"></script>
<div id="dragTarget"
     style="background-color: #000000; border: 1px solid #666666;
            color: #ffffff; padding: 10px; position: absolute;
            font-family: sans-serif; cursor: move">
Drag Me!
</div>

JavaScript

var dragTarget = $('#dragTarget'),

// Get the three major events
    mouseup = dragTarget.onAsObservable('mouseup'),
    mousemove = $(document).onAsObservable('mousemove'),
    mousedown = $(document).onAsObservable('mousedown').select(function(event) {
        // calculate offsets when mouse down
        event.preventDefault();
        return {
            left: event.clientX - dragTarget.offset().left,
            top: event.clientY - dragTarget.offset().top
        };
    })

    // Combine mouse down with mouse move until mouse up
    ,
    mousedrag = mousedown.selectMany(function(imageOffset) {
        return mousemove.select(function(pos) {
            // calculate offsets from mouse down to mouse moves
            return {
                left: pos.clientX - imageOffset.left,
                top: pos.clientY - imageOffset.top
            };
        }).takeUntil(mouseup);
    });

mousedrag.subscribe(function(pos) {
    // Update position
    $('#dragTarget').css({
        top: pos.top,
        left: pos.left
    });
});