JSFiddle - React, Tailwind, and code Playground

by San-Kai Liao

HTML

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<div class="yes">
    <div class="row-fluid">
        <div class="btn-group">
            <button class="btn"><i class="icon icon-plus-sign"></i>Type</button>
            <button class="btn"><i class="icon icon-plus-sign"></i>Category</button>        
        </div>
        <ul>
            <li>
                <div class="ooo">
                    <span class="label">Type-00</span>
                    <span class="quick-tool">
                        <a href="#" rel="tooltip" title="Rename">
                            <i class="icon icon-edit"></i>
                        </a>
                        <a href="#" rel="tooltip" title="Delete">
                            <i class="icon icon-remove-sign"></i>
                        </a>
                    </span>       
                </div>            
                <ul>
                    <li>
                        <div class="ooo">
                            <span class="label label-success">Category-00</span>
                            <span class="quick-tool">
                                <a href="#" rel="tooltip" title="Rename">
                                    <i class="icon icon-edit"></i>
                                </a>
                                <a href="#" rel="tooltip" title="Delete">
                                    <i class="icon icon-remove-sign"></i>
                                </a>
                            </span>
                        </div>
                     </li>
                    <li>
                        <div class="ooo">
                            <span class="label...

CSS

div.yes {
  width: 200px;    
  border: 1px solid #CCC;
  font-size: large;
}

.ooo {
  height: 24px;
  line-height: 24px;
}

.ooo span.quick-tool {
 display:none;   
}

JavaScript

$(document).ready(function() {
    $("li").draggable({
        handle: 'div.ooo',
        revert: true,
        start: function(evt) {
            $('div.ooo').addClass('hover-disabled');
            $(this).find('span.quick-tool').hide();
        },
        stop: function(evt) {
            $('div.ooo').removeClass('hover-disabled');
            // $(this).find('span.quick-tool').show();
        }
    });
    $('.category-list ul').droppable({
        activeClass: "ui-state-hover",
        accept: ".category-list li",
        drop: function(evt, ui) {
            $(ui.draggable).appendTo(this);
        }
    });
    $('a[rel="tooltip"]').tooltip();
    $('div.ooo:not(.hover-disabled)').hover(

    function() {
        if (!$(this).hasClass('hover-disabled')) {
            $(this).find('span.quick-tool').show();
        }
    }, function() {
        $(this).find('span.quick-tool').hide();
    });
});