JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<h2>adsasdf</h2>

<div class='container'>
    <!--
    <div style='display:none;'>
<div class='pusher'></div>
<div class='block'>
    <div class='img'></div>
</div>
<div class='block inline'>
    <div class='img'></div>
</div>
<div class='block inline'>
    <div class='img'></div>
</div>
<div class='block inline'>
    <div class='img'></div>
</div>
<div class='block inline right'>
    <div class='img'></div>
</div>
    </div>
    -->
<div class='pusher'  style='height: 14px;'></div>
<div class='block center'>
    <div class='img'></div>
</div>
    
<div class='pusher' style='height: 400px;'></div>
<div class='block center'>
    <div class='img'></div>
</div>
<div class='pusher' style='height: 400px;'></div>
<div class='block center'>
    <div class='img'></div>
</div>

<div class='edit' contenteditable>
    <p>
        Short description
    </p>
    
    <p>
        <h3>Paragraph Title</h3>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim erat nec turpis luctus eu dictum odio sollicitudin. Nulla et est dolor. Aliquam ac justo in neque vestibulum luctus quis ac lorem. Nulla facilisi. Pellentesque turpis massa, fringilla et tempor eget, iaculis non neque. Sed vitae nibh sed nunc convallis fringilla laoreet eget felis. Nam imperdiet varius mi, vitae auctor risus ultricies vel. Sed ligula massa, convallis quis auctor eu, sollicitudin sed justo. Etiam mi est, consectetur sit amet pretium sed, tempor vitae mauris. Vestibulum venenatis nunc ac tellus feugiat ac iaculis leo accumsan.

    </p>
    <p>
        <h3>Paragraph Title</h3>
Maecenas feugiat tincidunt aliquet. Integer ut sapien tortor, aliquam adipiscing arcu. Vivamus consectetur ornare lorem, quis consequat est viverra nec. Curabitur imperdiet risus in est semper eu consequat arcu sodales. Aenean dui mauris, eleifend sit amet vehicula sed, cursus id odio. Quisque libero ligula, vestibulum ac cursus ac, cursus a quam. Vestibulum vitae justo orci. Nam id risus at ipsum sagittis...

CSS

.container { position:relative; }
.pusher {
float:left;
    height: 100px;
    clear:both;
    
    background:blue;
    width: 20px;
}
.block { 
float: left;
z-index: 10;
position: relative;
clear: both;
}

.left { }
.inline{ clear: none; }
.right { float:right; }
.center { width: 100%; margin:0 auto; text-align:center; }

.img {
    margin: 10px;
    
background:red;
width: 50px;
height: 50px;
    display:inline-block;
}
.edit { 
position: relative;
text-align: left;
display: block;
}

JavaScript

$(function() {
    draggable($('.container')[0], $('.block'), function(x, y, e) {
        var pusher = $(this).prevAll(".pusher").first();
        var pusherNext = $(this).nextAll(".pusher").first();
        var blockNext= pusherNext.nextAll(".block").first();
        
        var oldHeight = pusher.height();
        var newHeight = y - 25 - pusher.position().top;
        var heightDiff = oldHeight - newHeight;
        pusher.height(newHeight);
        
        var spacing = pusherNext.height();
        
        console.log(heightDiff, spacing);
        /*if ((spacing + heightDiff) < 10) {
            blockNext.after($(this));
            blockNext.after(pusherNext);
            $(this).removeClass("inline");
        }*/
       pusherNext.height(spacing + heightDiff);
        
        $(this).toggleClass("center", x <= 300 && x >= 100);
        $(this).toggleClass("right", x > 300);
        $(this).toggleClass("left", x < 100);
    });
});
    /**
     * Lightweight drag helper.  Handles containment within the element, so that
     * when dragging, the x is within [0,element.width] and y is within [0,element.height]
     */
    function draggable(element, handle, onmove, onstart, onstop) {
        onmove = onmove || function() { };
        onstart = onstart || function() { };
        onstop = onstop || function() { };
        var doc = element.ownerDocument || document;
        var dragging = false;
        var offset = { };
        var maxHeight = 0;
        var maxWidth = 0;
        var IE = $.browser.msie;
        var hasTouch = ('ontouchstart' in window);
        var activeHandle = $([]);
        var duringDragEvents = { };
        duringDragEvents["selectstart"] = prevent;
        duringDragEvents["dragstart"] = prevent;
        duringDragEvents[(hasTouch ? "touchmove" : "mousemove")] = move;
        duringDragEvents[(hasTouch ? "touchend" : "mouseup")] = stop;

        function prevent(e) {
            if (e.stopPropagation) {
               ...