JSFiddle - React, Tailwind, and code Playground

by rodneyrehm

HTML

<link rel="stylesheet" href="http://view.jqueryui.com/position-notification/themes/base/jquery.ui.all.css">
<!--
  FROM http://view.jqueryui.com/position-notification/tests/visual/position/position_feedback.html
-->
<div id="target">all around me</div>
<div class="element"><div>asd</div></div>

CSS

body { font-size: 62.5%; }
#draggable, #resizable { width: 100px; height: 100px; background: #abc; }
#droppable { width: 100px; height: 100px; background: #cde; }


#target, .element {
    position: absolute;
    border: 1px solid black;
    border-radius: 5px;
    width: 75px;
    height: 25px;
    padding: 5px;
}
#target {
    height: 75px;
}
.element:before {
    font-size: 12pt;
    content: "↑";
    position: absolute;
    top: -19px;
    left: 5px;
}
.right:before {
    left: auto;
    right: 5px;
}
.bottom:before {
    content: "↓";
    top: auto;
    bottom: -19px;
}
.center:before {
    left: 50%;
    right: auto;
}
.middle:before {
    top: 50%;
    bottom: auto;
}
.horizontal:before {
    height: 10px;
    top: 50%;
    margin-top: -8px;
    bottom: auto;
    left: -18px;
    right: auto;
    content: "←";
}
.right.horizontal:before {
    left: auto;
    right: -18px;
    content: "→";
}
.bottom.horizontal:before {
    top: auto;
    bottom: 5px;
}
.top.horizontal:before {
    top: 5px;
}


.anchor {
    position: absolute;
    width:10px; 
    height:10px;
    background: transparent;
}
.anchor.base {
    border: 1px solid red;
}
.anchor.position {
    border: 1px solid green;
}
.anchor.target {
    border: 1px solid magenta;
}

JavaScript

/*!
 * jQuery UI Position @VERSION
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Position
 */
(function( $, undefined ) {

$.ui = $.ui || {};

var rhorizontal = /left|center|right/,
    rvertical = /top|center|bottom/,
    roffset = /[\+\-]\d+%?/,
    rposition = /^\w+/,
    rpercent = /%$/,
    center = "center",
    _position = $.fn.position;

$.position = {
    scrollbarWidth: function() {
        var w1, w2,
            div = $( "<div style='display:block;width:50px;height:50px;overflow:hidden;'><div style='height:100px;width:auto;'></div></div>" ),
            innerDiv = div.children()[0];

        $( "body" ).append( div );
        w1 = innerDiv.offsetWidth;
        div.css( "overflow", "scroll" );

        w2 = innerDiv.offsetWidth;

        if ( w1 === w2 ) {
            w2 = div[0].clientWidth;
        }

        div.remove();

        return w1 - w2;
    },
    getScrollInfo: function(within) {
        var notWindow = within[0] !== window,
            overflowX = notWindow ? within.css( "overflow-x" ) : "",
            overflowY = notWindow ? within.css( "overflow-y" ) : "",
            scrollbarWidth = overflowX === "auto" || overflowX === "scroll" ? $.position.scrollbarWidth() : 0,
            scrollbarHeight = overflowY === "auto" || overflowY === "scroll" ? $.position.scrollbarWidth() : 0;

        return {
            height: within.height() < within[0].scrollHeight ? scrollbarHeight : 0,
            width: within.width() < within[0].scrollWidth ? scrollbarWidth : 0
        };
    }
};

$.fn.position = function( options ) {
    if ( !options || !options.of ) {
        return _position.apply( this, arguments );
    }

    // make a copy, we don't want to modify arguments
    options = $.extend( {}, options );

    var target = $( options.of ),
        within  = $( options.within || window ),
        targetElem =...