JSFiddle - React, Tailwind, and code Playground

by Exceeder

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<ul id="container">
        <li class="draggable">
            <div class="header">
                <h1>HEADER1</h1>
                <div class="button"></div>
                <div class="button dropmenu"  id="menuwrap">
                    <a href="#" class="dropdown">fwd</a>
                         <ul class="menucontainer" style="margin:0px" id="dr1">
                                <li><a href="#">One</a></li>
                                <li><a href="#">Two</a></li>
                                <li><a href="#">Three</a></li>
                        </ul>
                </div>
                <div class="button"></div>
            </div>



        </li>
       <li class="draggable">
            <div class="header">
                <h1>HEADER2</h1>
                 <div class="button minimize"></div>
                <div class="button dropmenu" id="menuwrap2">
                     <a href="#" class="dropdown">fwd</a>
                          <ul class="menucontainer" style="margin:0px" id="dr2">
                                 <li><a href="#">One</a></li>
                                 <li><a href="#">Two</a></li>
                                 <li><a href="#">Three</a></li>
                         </ul>
                 </div>
                <div class="button maximize"></div>
            </div>
        </li>


    </ul>

CSS

.dropmenu ul
{
display:none;
}
.draggable
{


    margin: 0px;
    float: left;
    background: #111;
    list-style:none;
    border:1px solid #111;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
-moz-box-shadow: 5px 5px 5px #111; /* Firefox 3.6 and earlier */
box-shadow: 5px 5px 5px #111;
}

.header h1
{
    font-size: 10pt;
    font-weight: bold;
    font-family: arial;
    color: #eee;
    margin: 5px;
    float: left;
}

.header .button
{
    height: 10px;
    width: 10px;
    margin: 7px 5px 1px 1px;
    background: white;
    float: right;
    display: inline;
}

.body
{
    margin: 5px;
}

.body input
{
    margin: 1px;
    display: block;
}

#container
{
    height: 500px;
    width: 1000px;

}

.menucontainer{
    background-color:#202020;
    height:80px;
    width:60px;
    border:1px solid red;
   }
.menucontainer ul{

    position:absolute;
   display:none;
    border:1px solid red;
    border-top:0px;
}

JavaScript

jQuery("#menuwrap").click(function(){ return false; });
    jQuery("#menuwrap2").click(function(){ return false; });
    $("#container").sortable({
        handle:'h1',
        scroll: false,
        revert: true,
        tolerance: 'pointer'
    });

$("h1").click(function(){return false;});

$("#menuwrap").click(function(){
   $("#dr1").show(500);
});

$("#menuwrap2").click(function(){
    $("#dr2").show(500);
});

$('html').click(function() {
    jQuery("#menuwrap").click(function(){ return false; });
    jQuery(document).one("click", function() { jQuery("#dr1").fadeOut(); });
    jQuery("#menuwrap2").click(function(){ return false; });
    jQuery(document).one("click", function() { jQuery("#dr2").fadeOut(); });

});


$('.menucontainer > li >  a').click(function(){
      $('.menucontainer').hide(500);
       return false;        
});