JSFiddle - React, Tailwind, and code Playground

by mattpodwysocki

HTML

<script src="http://reactive-extensions.github.com/rxjs-html/rx.min.js"></script>
<script src="http://reactive-extensions.github.com/rxjs-html/rx.jquery.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');

var getOffset = function(event) {
    return {
        offsetX: event.offsetX === undefined ? event.layerX : event.offsetX,
        offsetY: event.offsetY === undefined ? event.layerY : event.offsetY
    };
};

var createDrag = function (target) {
    var move = target.onAsObservable('mousedown').select(function (md) {
        var start = getOffset(md);
        
        return $(document).onAsObservable('mousemove').select(function (mm) {
            mm.preventDefault();
            return {
                left: mm.clientX - start.offsetX,
                top: mm.clientY - start.offsetY
            };                
        });
    });

    var drop = $(document).onAsObservable('mouseup').select(function () {
        return Rx.Observable.never();
    });
    
    return move.merge(drop).switchLatest();
};

var drag = createDrag(dragTarget);

drag.subscribe(function (pos) {
    dragTarget.css({top: pos.top, left: pos.left }); 
});