JSFiddle - React, Tailwind, and code Playground

by EDWIN MAURICIO QUISHPE MALDONADO

HTML

<div class="principal">
    <div class="row"><div class="arr"></div></div>
    <div class="row"><div class="arr"></div></div>
    <div class="row"><div class="arr"></div></div>
    <div class="row"><div class="arr"></div></div>
    
</div>

CSS

.principal{
    width:400px;
    height:400px;
    background-color:blue;
}
#principal{
    width:400px;
    height:400px;
    background-color:blue;
}
.row{
    width:98%;
    height:50px;
    background-color:cyan;
    border:1px solid black;
}
.arr{
    display: inline-block;
	margin: 2px;
	width: 20px;
    height:10px;
    background-color:red;
}

JavaScript

/*$(".principal").mouseover(function(){
    console.log("Estoy saliendo en pantalla");
});*/
$(document).ready(function(){
       //$("div.arr").draggable();
    $(".principal").sortable();
    $(".principal").sortable('disable');
    $("div.arr").mouseup(function(){
        //console.log("hola");
       
        $(".principal").sortable('disable');
        
    });
    
    $("div.arr").mousedown(function(){
        //$(".principal").sortable();
        $( ".principal" ).sortable( "enable" );
         //$(".principal").sortable();
    });
});