JSFiddle - React, Tailwind, and code Playground

by fparent

HTML

<div>
              <form id="create_menu_item">
                <ul class="add_remove_list">
                    <li><h4>Add Menu Item</h4></li>
                    <li><input id="new_menu_name" type="text" name="new_menu_name" placeholder="Please enter your menu title">
                        <input class="add_menu_item" name="add_menu_item" value="Add" type="button">
                    </li>
                    <li class="clear"><h4>Menu Items</h4></li>
                      <li><div id="created_buttons"> <ol id="created_buttons_list"> </ol>  </div>                        
                    </li>
                </ul>
                    </form> 
                </div>

CSS

form#create_menu_item{ width:920px; }
form#create_menu_item input#new_menu_name{ padding:5px; float:left; margin:0 10px 10px 0; }
form#create_menu_item input.add_menu_item{
    font-size:11px;
    width:60px;
    height:27px;
    display:block;
    -moz-border-radius:3px; -webkit-border-radius:3px; -o-border-radius:3px; border-radius:3px;
    background:#f5f5f5; background: -moz-linear-gradient(100% 100% 90deg, #eee, #fcfcfc); background: -webkit-linear-gradient(#fcfcfc, #eee) !important; background: -o-linear-gradient(#fcfcfc, #eee);
    border:1px solid #ccc;
    color:#666;
    padding-bottom:3px;
    float:left;
}
div.div_menu_button{
    font-size:12px;
    width:295px;
    height:16px;
    display:block;
    -moz-border-radius:3px; -webkit-border-radius:3px; -o-border-radius:3px; border-radius:3px;
    background:#f5f5f5; background: -moz-linear-gradient(100% 100% 90deg, #eee, #fcfcfc); background: -webkit-linear-gradient(#fcfcfc, #eee) !important; background: -o-linear-gradient(#fcfcfc, #eee);
    border:1px solid #ccc;
    color:#666;
    padding:10px;
    margin:0 0 10px 0;
    position:relative;
}
div#created_buttons{ width:680px; border:1px solid #eee; min-height:400px; padding:10px;}
.clear{ clear:both;}

#show, #show00, #show01, #show02, #show03, #show04, #show05 { display:none;}

.ui-nestedSortable-error { background:#fbe3e4; color:#8a1f11;}
ol#created_buttons_list{ margin: 0; padding: 0; padding-left: 30px;}
ol#created_buttons_list, ol#created_buttons_list ol { margin: 0 0 0 25px; padding: 0; list-style-type: none;}
ol#created_buttons_list { margin: 10px 0 10px 0;}
#created_buttons_list li { margin: 7px 0 0 0; padding: 0;}
#created_buttons_list li div  { padding: 10px; margin: 0; cursor: move;}
.placeholder { background-color: #f9f9f9; border:1px dashed #ccc;}

JavaScript

// Nested Sortable Plugin
/*
 * jQuery UI Nested Sortablefdfv
 * v 1.3.4 / 28 apr 2011
 * http://mjsarfatti.com/sandbox/nestedSortable
 *
 * Depends:
 *     jquery.ui.sortable.js 1.8+
 *
 * License CC BY-SA 3.0
 * Copyright 2010-2011, Manuele J Sarfatti
 */

(function($) {

    $.widget("ui.nestedSortable", $.extend({}, $.ui.sortable.prototype, {

        options: {
            tabSize: 20,
            disableNesting: 'ui-nestedSortable-no-nesting',
            errorClass: 'ui-nestedSortable-error',
            listType: 'ol',
            maxLevels: 0,
            noJumpFix: 0
        },

        _create: function(){
            if (this.noJumpFix == false)
                this.element.height(this.element.height());
            this.element.data('sortable', this.element.data('nestedSortable'));
            return $.ui.sortable.prototype._create.apply(this, arguments);
        },



        _mouseDrag: function(event) {

            //Compute the helpers position
            this.position = this._generatePosition(event);
            this.positionAbs = this._convertPositionTo("absolute");

            if (!this.lastPositionAbs) {
                this.lastPositionAbs = this.positionAbs;
            }

            //Do scrolling
            if(this.options.scroll) {
                var o = this.options, scrolled = false;
                if(this.scrollParent[0] != document && this.scrollParent[0].tagName != 'HTML') {

                    if((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity)
                        this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop + o.scrollSpeed;
                    else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity)
                        this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed;

                    if((this.overflowOffset.left + this.scrollParent[0].offsetWidth) - event.pageX <...