JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<button id="sort">
  To array
</button>

<div id="hide_menu">
hide_menu
</div>
<div id="container">
    <div id="elemtxt7654321" class="item texte">
        Texte
    </div>
    <div id="elemimg0965874" class="item image">
        Image
    </div>
    <div id="elemgraph12345" class="item graph">
        Graphique
    </div>
    <div class="menu">
        <div id="main_menu">
            <span id="z-up" class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
            <span id="z-down" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
            <span id="opacity_button" class="glyphicon glyphicon-adjust" aria-hidden="true"></span>
        </div>
        <div id="opacity_menu">

        </div>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}


/*
Souris
*/


/*#mouse_cursor{
  z-index:5000;
  background-color:#f00;
  pointer-event:none;
}*/

#container {
    width: 600px;
    height: 300px;
    background-color: #ccc;
    margin: 100px 80px;
    position: relative;
    display: block;
}

.item {
    width: 180px;
    height: 66px;
    font-size: 36px;
    position: absolute;
    border: 1px dotted transparent;
    cursor: pointer
}

.item.texte {
    left: 80px;
    top: 200px;
	background-color:#7DB0E9;
	z-index:1;
}

.item.image {
    left: 50px;
    top: 130px;
	background-color:#376FA8;
	z-index:3;
}

.item.graph {
    left: 150px;
    top: 30px;
	background-color:#E98575;
	z-index:2;
}

.item:hover,
.item.active {
    border: 1px dotted #42b05f;
}

.item.active:hover {
    //cursor:crosshair
}

.item .ui-resizable-handle {
    width: 10px;
    background-color: #42b05f;
    right: -7px;
    top: -1px;
    height: calc(100% + 2px);
	border-radius:0 5px 5px 0;
}

.menu {
    background-color: #0D171A;
    position: absolute;
    top: -80px;
    left: -80px;
    width: 66px;
    height: 66px;
    border: 1px solid #eee;
    border-radius: 5px;
    /*display: none;*/
	opacity:0;
    color: #eee;
    overflow: hidden;
	transition: width .3s ease-in-out,opacity .1s ease-in-out;
	z-index:8000;
}

.menu.active {
    display: block;
	opacity:1;
}

.menu > div {
    float: left;
}


/*
main menu
*/

#main_menu {
    width: 64px;
}

#main_menu > span {
    cursor: pointer;
    display: block;
    float: left;
    height: 32px;
    line-height: 32px;
    text-align: center;
    width: 32px;
}

#main_menu > span:hover {
    background: rgba(41, 46, 48, .8);
}
#main_menu > span.disabled{
	cursor:not-allowed;
}

/*
menu opcité
*/

#opacity_menu {
	height:44px;
	margin:10px 0 0 5px;
}

JavaScript

function init_menu(element){
	//gestion du z-index
	var current_z_index = element.css('z-index');
	
	// raz
	$('#z-up,#z-down').removeClass('disabled');
	// bouton up
	// init
	if (element.css('z-index') == $('#container').children('.item').length ) {
		$('#z-up').addClass('disabled');
	}
	if (element.css('z-index') == 1 ) {
		$('#z-down').addClass('disabled');
	}
	// bouton up
	// on monte de 1
	$("#z-up:not(.disabled)").on('click', function(){
		element.css('z-index',current_z_index + 1);
		
		$.each($('#container .item:not(.active)'), function(index, val) {
			if ( $(this).css('z-index') == current_z_index + 1 ){
				$(this).css('z-index',parseInt(current_z_index - 1));
				return;
			}
		});
		init_menu(element);
	})
	// bouton down
	// on descend de 1
	$("#z-down:not(.disabled)").on('click', function(){
		
		element.css('z-index',current_z_index - 1);
		
		$.each($('#container .item:not(.active)'), function(index, val) {
			if ( $(this).css('z-index') == current_z_index - 1 ){
				$(this).css('z-index',parseInt(current_z_index + 1));
				return;
			}
		});
		init_menu(element);
	})
}
function init_item() {
    var dragCheck = false;
    $(".item").draggable({
        //containment:"parent",
        distance: 5,
        grid: [5, 5],
        start: function(event, ui) {
            $('.item').removeClass('active');
            $(this).addClass('active');
        },
        drag: function(event, ui) {
            dragCheck = true;
            var menu_left_position = 0;
            if (ui.position.left + ui.helper.width() < $('#container').width()) {
                menu_left_position = parseInt($(this).css('width')) + ui.position.left + 10;
            } else {
                menu_left_position = ui.position.left - 80; //quand pas assez de places à droite on passe à gauche
            }
            $(".menu").css({
                'left': menu_left_position,
                'top': ui.position.top
            });

        },
        stop: function(event, ui)...