JSFiddle - React, Tailwind, and code Playground

by bionicoz

HTML

<ul id="allItems">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<br class="push">

<p id="edit">Personalizza la tulbarra</p>
<ul id="myToolbar">
</ul>


<p id="logger"></p>

CSS

li {
    font-size:10px;
    height:45px;
    width:45px;
    float:left;
    border-radius:15px;
    padding:5px;
    box-shadow:1px 1px 1px #333;
    margin:15px;
    padding:2px;
}



#allItems{
    
    display:none;
}

#allItems li{
cursor:move;}

#myToolbar {
height:60px;
border:1px solid black;  
}

.tmp{
    height:46px;
    width:46px;
    border:2px dashed grey;
    float:left;
    box-shadow:none;
    padding:0px;

}

.ui-draggable-dragging{
/*opacity:0.5;*/
}

.delete_16{
position:relative;
top:-7px;
left:-7px;
    width:16px;
    height:16px;
background-image:url('http://icons.iconarchive.com/icons/dryicons/simplistica/16/delete-icon.png');
background-repeat:no-repeat;
background-color:transparent;
}

.push{
display:block;
clear:both;
height:0;}

li{
margin:5px;}

JavaScript

var itemSelected;
var editMode=false;


/* functions */
function reArrange(){
    
    $('#allItems br').remove();  
    $('#allItems li:nth-child(4n)').after('<br class="push">');
    $('#allItems li').draggable({
        connectToSortable: '#myToolbar',
        placeholder: 'tmp',
        helper: 'clone',
        snap: 'true',
        opacity: 0.35,
        revert:'invalid', 
        start: function(event, ui) {
            selected=$(this);
        },
        stop: function(event, ui) {
            //$('.tmp').remove();
        }
});
    
    function writeToLog(){
    
        var txt;
        txt+=$('myToolbar li').html();
        alert('aaa');
    }
    
    
    


}

reArrange();

$('#allItems li').each(function() {
    var rnd= Math.floor(Math.random()*255*255*255).toString(16);
    $(this).css("background-color",'#'+ rnd);
    $(this).html(rnd);
    
});


$("#myToolbar").sortable({
    revert:300,
    placeholder: 'tmp',
    stop: function(event, ui) {
        selected.remove();
        reArrange();
        if(!ui.item.find('div').length) ui.item.prepend('<div class="delete_16"></div>');
        
    }
});



$('.delete_16').live('click',function(){
    $(this).parent().appendTo($('#allItems'));
    $(this).remove();
    reArrange();
});



/*** Switch Edit Mode ***/
$('#edit').live('click',function(){ 
    editMode= !editMode;
    $('#allItems').toggle(500);
    if(editMode) {
        $('#myToolbar li').prepend('<div class="delete_16"></div>');
        $("#myToolbar").sortable( "option", "enabled", true );
        $('#myToolbar li').die('click');
    }
    else {
        $('#myToolbar li .delete_16').remove();
        $("#myToolbar").sortable( "option", "disabled", true );
        $('#myToolbar li').live('click',function(){ alert($(this).html());});
    }
        
});