JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://plugins.jquery.com/files/jquery.cookie.js.txt"></script>
<ul class="bars"> 
    <li><a href="home">Some Name</a></li> 
    <li class="page_item"><a href="#" title="Downloads">Downloads</a></li> 
    <li class="page_item"><a href="#" title="Contact">Contact</a></li> 
    <li class="page_item"><a href="#" title="Work">Work</a></li>
</ul>

CSS

body {
    margin:0;
    padding:0;
}

ul.bars li {
    font-size: 25px;
    position:fixed;
    z-index:1;
    list-style-type:none;
    background:#000;
    padding:5px 0px;
    width:100%;
    text-align:center;
    cursor:move;
}

ul.bars li a {
    color:#fff;
}

JavaScript

$("ul.bars li").draggable({ containment: 'window', snap: "ul.bars li", snapMode: "outer" });

//if not dragged yet, first visit of page
//if ( $.cookie('position') != '' ) {
if ( 1==1 ) {
    
    var doc = $(document).height();
    
    // random distribution of elements
    $("ul.bars li").each(function() {
        var randPos = Math.random(0)*doc;
        $(this).css('top' , randPos+'px');
    });
    
} else {
    
    //retrieve last position of elements and set position
    
}

/*$("ul.bars li").draggable({
        stop: function(event, ui) {
            var currentPos = $(this).position();
            var currentTop = Math.round(currentPos.top);
            $.cookie('position' + $(this).index('li').toString(), currentTop.toString());
        }
    });*/