JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<button>Switch</button>
<div id='container' contenteditable>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in orci massa. Fusce volutpat gravida urna, vel semper diam ullamcorper ac. Aenean vitae aliquam felis. Nunc eget augue nunc. Nulla facilisi. Nunc quis metus elit, eget iaculis massa. Cras sapien est, iaculis ut tincidunt a, consequat sed enim. <b>Sed viverra <i>nulla</i> scelerisque massa ultricies</b> et feugiat mauris eleifend. Pellentesque aliquam, risus quis adipiscing vestibulum, mi arcu condimentum nibh, vitae porttitor felis odio vitae est. Donec lobortis faucibus lorem sed tincidunt. Proin sagittis eros sit amet tellus lacinia at bibendum leo luctus. Praesent et urna eros.

    <div class='gizmo gizmo-align-center'>
<img src="http://placehold.it/350x150">
    </div>
    <p>
        Nam sed enim metus. Mauris interdum nisi eu ligula sagittis sodales. Etiam ut libero et lacus dictum sagittis eu quis metus. Morbi varius arcu sit amet purus tristique <b>vulputate</b>. Proin aliquet condimentum suscipit. Sed congue vulputate velit, sed fringilla orci mollis et. Nunc egestas, odio non facilisis mollis, lectus libero posuere diam, a vestibulum arcu neque vehicula elit. Nunc sed ipsum eu risus adipiscing consectetur. Fusce tempor mattis molestie. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi diam purus, condimentum id consequat quis, consequat ut felis. Nunc et velit ipsum.
    </p>
Vivamus sit amet ornare nulla. Aliquam in sem magna. Duis quam nunc, pharetra vitae commodo et, lobortis non nisi. Vivamus lacinia felis eget augue interdum elementum. Suspendisse metus tellus, vehicula nec rhoncus eu, varius quis nibh. Integer bibendum feugiat diam, et lobortis magna viverra vestibulum. Fusce condimentum leo at lectus blandit et scelerisque odio iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing...

CSS

img {
    margin:10px;
    border: solid 10px red;
}
.fake {
 background: lightyellow;   
}

#container {
     margin: 40px;
    padding: 10px;     
    position:relative;
}


.gizmo-align-left .image-gizmo-container, .gizmo-align-left .slideshow-gizmo-container { float: left; }
.gizmo-align-right .image-gizmo-container, .gizmo-align-right .slideshow-gizmo-container { float: right;}

.gizmo-align-center { text-align: center; clear: both; display:block; }
.gizmo-align-center .image-gizmo-container { }

.gizmo-align-floatright { float: right; }
.gizmo-align-floatleft { float: left; margin-right: 1.5em; }

JavaScript

var alignCSS = {
    floatright: "gizmo-align-floatright",
    floatleft: "gizmo-align-floatleft",
    right: "gizmo-align-right",
    left: "gizmo-align-left",
    middle: "gizmo-align-center",
    all: "gizmo-align-center gizmo-align-left gizmo-align-right gizmo-align-floatleft gizmo-align-floatright",
    getClass: function (align, wordwrap) {
        if (wordwrap && align != 'middle')
            return (align == 'right') ? this.floatright : this.floatleft;

        return this[align];
    }
};



$.widget("ui.superdrag", $.ui.mouse, {
    _init: function () {
        this._mouseInit();
    },
    destroy: function () {
        this._mouseDestroy();
    },
    _mouseStart: function (e) {
        this.yStart = e.pageY;
        this.el = e.target;
        this.offsetWidth = $(this.el.offsetParent || "body").width();
        this.elWidth = $(this.el).width();
        this.startOffsetLeft = $(this.el.offsetParent || "body").offset().left;
        this.oneThird =  this.offsetWidth / 3;
        this.twoThirds = this.oneThird * 2;
        this.placement = false;
        this._trigger("start", e)
    },
    _mouseStop: function (e) {
        this._trigger("stop", e);
    },
    _mouseDrag: function (e) {
        
        var placement = false;
        var innerX = e.pageX - this.startOffsetLeft;
        if (innerX  <= this.oneThird) {
            placement = "left";
        }
        else if (innerX  > this.twoThirds) {
            placement = "right";
        }
        else {
            placement = "center";
        }
        
        if (Math.abs(this.elWidth - this.offsetWidth) < 100){
             //placement = "center";   
        }
        
        if (placement != this.placement) {
            this.placement = placement;
            this._trigger("placement", e, placement);
        }
        
        
        if ($(e.target).is(".fake")) {
            this._trigger("drag", e, (e.pageY < this.yStart) ? "above" : "below");
        }
    },
    options: {
      ...