JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="mn-items">
  <h2>Drag</h2>
  <div id="catalog">
      <ul class="rp-draggable">
        <li class="one">Item 1 <i class="fa fa-star-o"></i></li>
        <li class="two">Item 2 <i class="fa fa-star-o"></i></li>
        <li class="three">Item 3 <i class="fa fa-star-o"></i></li>
        <li class="four">Item 4 <i class="fa fa-star-o"></i></li>
        <li class="five">Item 5 <i class="fa fa-star-o"></i></li>
        <li class="six">Item 6 <i class="fa fa-star-o"></i></li>
      </ul>
  </div>
</div>
 
<div class="header-favorites">
  <h2>Drop Here...</h2>
    <ul class="h-droped-list">
      <li class="placeholder">Placeholder (hides if it has items)</li>
    </ul>
</div>

CSS

body{font-family:verdana;font-size:12px;}
h2 {padding:5px;background:#222;margin:0px;color:#fff;}
ul,li{list-style:none;margin:0;padding:0;}

.mn-items,.header-favorites{display:block;clear:both;width:400px;}
.mn-items li{background:#eee;padding:5px;cursor:pointer;margin-bottom:5px;position:relative;}

.header-favorites {margin-top:20px;}
.header-favorites ul {margin:0;padding:0;background:#E1FFDF;clear:both;overflow:hidden;}
.header-favorites ul li{position:relative;padding:10px;border-top:2px solid #fff;border-left:2px solid #000;cursor:pointer;}
.header-favorites ul li:first-child{border-top:none;}

.mn-items li i,.header-favorites ul li i{display:block;position:absolute;right:5px;top:5px;opacity:0.5;font-size:15px;font-weight:bold;font-style:normal;}

.placeholder{background:none;color:#888;cursor:default;margin-bottom:0 !important;text-align:center;border:1px solid #ccc !important;}
.ui-sortable-helper{background:#fff;}

.addedToFav{background:#B8FFB3 !important;}
.addedToFav i:before{content:"\f005";}
.header-favorites i:before{content:"\f00d";}

JavaScript

$(document).ready(function(){
    
    /* jQuery Droppable */
    $(function() {
        $( ".mn-items .rp-draggable li" ).draggable({
            appendTo: "body",
            helper: "clone"
        });
        $( ".header-favorites ul" ).droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function( event, ui ) {
                $( this ).find( ".placeholder" ).remove();
                $(ui.draggable).clone().appendTo(this);
            }
        }).sortable({
            items: "li:not(.placeholder)",
            sort: function() {
                $( this ).removeClass( "ui-state-default" );
            }
        });
    });
    
    
    /* Click Star Icon to Add to Drop Here Container */
    $('ul.rp-draggable li .fa-star-o').click(function(){
        $(this).closest('li').clone().appendTo('.h-droped-list');
        $(this).closest('li').toggleClass('addedToFav');
    });
    
    /* Click Close Icon to Remove from Drop Here Container */
    $("ul.h-droped-list").on('click','li .fa-star-o',function(){
        $(this).closest('li').remove();
    });
    
    /* Hide Placeholder if it has Items or Show if it is empty */
    if($(".header-favorites ul li:not(.placeholder)").length > 0) {
        $(".header-favorites ul li.placeholder").hide();
    }else{
        $(".header-favorites ul li.placeholder").show();
    }
    
    
});