JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
    <script src="//raw.github.com/gist/3803955/do.js"></script>
</head>
<body></body>
</html>

CSS

body { background: black; }

JavaScript

var mousedown = function(el) {
    return function(k) {
        var handle = function handle(e) {
            el.removeEventListener("mousedown", handle, false);
            k(e);
        };
        console.log("Register mousedown");
        el.addEventListener("mousedown", handle, false);
        return Cont.return_();
    };
};

var update = function(e, downE) {
    var x = e.clientX - (downE.offsetX || downE.layerX),
        y = e.clientY - (downE.offsetY || downE.layerY);
    downE.target.style.left = x + "px";
    downE.target.style.top = y + "px";
};

var register = function(k) {
    var handler = function(e) {
        k([e, handler]);
    };
    window.addEventListener("mousemove", handler, false);
    window.addEventListener("mouseup", handler, false);
};

var moveOrCancel = function(e, downE) {
    if (e[0].type == "mousemove") {
        update(e[0], downE);
    } else {
        window.removeEventListener("mousemove", e[1], false);
        window.removeEventListener("mouseup", e[1], false);
        return Cont.return_();
    }
};

var dragdrop = function(el) {
    return forever(Cont, Cont.do_({
        downE: mousedown(el)
    })({
        e: register
    })(moveOrCancel, "e", "downE")());
};

var el = document.createElement("div");
el.style.position = "absolute";
el.style.background = "white";
el.style.height = "50px";
el.style.width = "50px";
document.body.appendChild(el);

dragdrop(el)(function() {});