JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<div id="wrapper">
    <div id="dragme">
        <div id="bar" onmousedown="drag(event)"></div>
        <form style="background: #555;">
            <input type="text" size="20" />
            <input type="button" size="20" value="Yes" />
        </form>
    </div>
</div>http://jsfiddle.net/arcm111/4s6qV/#update

CSS

#wrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: yellow;
    position: fixed;
    top: 0;
    left: 0;
}
#bar {
    margin: 5px;
    height: 20px;
    width: 190px;
    background: #ccc;
    cursor: move;
}
#dragme {
    width: 200px;
    height: 200px;
    background: #333;
    border: 1px solid #000;
    position: absolute;
    top: 100px;
    left: 100px;
    text-align: center;
}

JavaScript

var arr = [];

function drag(e) {
    e.stopPropagation();
    var elm = e.currentTarget.parentNode || e.srcElement.parentNode,
        para = {
        "elm": elm.id,
            "l": elm.offsetLeft - e.pageX,
            "t": elm.offsetTop - e.pageY,
            "w": window.innerWidth,
            "h": window.innerHeight
    },
        border = {
        "l": 10,
            "t": 10,
            "r": para.w - elm.offsetWidth - 10,
            "b": para.h - elm.offsetHeight - 10
    };
    arr.push(para);
    arr.push(border);
    eventListener.bind(document, 'mousemove', move);
    eventListener.bind(document, 'mouseup', release);
}

function move() {
    var elm = document.getElementById(arr[0].elm);
    elm.style.left = event.pageX + arr[0].l + "px";
    elm.style.top = event.pageY + arr[0].t + "px";
    if (elm.offsetLeft < 10) elm.style.left = 0;
    if (elm.offsetTop < 10) elm.style.top = 0;
    if (elm.offsetLeft > arr[1].r) elm.style.left = arr[1].r + 10 + "px";
    if (elm.offsetTop > arr[1].b) elm.style.top = arr[1].b + 10 + "px";

}

function release() {
    eventListener.unbind(document, 'mousemove', move);
    eventListener.unbind(document, 'mouseup', release);
    arr = [];
}

eventListener = {
    bind: function (el, eventName, eventHandler) {
        if (el.addEventListener) {
            el.addEventListener(eventName, eventHandler, false);
        } else if (el.attachEvent) {
            el.attachEvent('on' + eventName, eventHandler);
        }
    },
    unbind: function (el, eventName, eventHandler) {
        if (el.removeEventListener) {
            el.removeEventListener(eventName, eventHandler, false);
        } else if (el.detachEvent) {
            el.detachEvent('on' + eventName, eventHandler);
        }
    }
};