JSFiddle - React, Tailwind, and code Playground

by Yassar Khan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="menu">
  <div class="notActive">
    Inactive Menu Item
  </div>
</div>

JavaScript

$('.notActive').draggable({ //.notActive is an item in the menu
    stop: function(){
        $(this).removeClass('notActive'); 
        $(this).addClass('active'); //make it an active item
        //Create a new object
        var newItem = $('<div class="item notActive">Furniture</div>');
        //Make the new item "draggable" and add it too the menu
        newItem.draggable();
        $('#menu').append(newItem);
        //this creates a new item in the menu
    }
});