JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<ul id="sortable">
    <li class="ui-state-default">
        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        <span class="ui-icon ui-icon-circle-close"></span>
        Item 1
    </li>
    <li class="ui-state-default">
        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        <span class="ui-icon ui-icon-circle-close"></span>
        Item 2
    </li>
    <li class="ui-state-default">
        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        <span class="ui-icon ui-icon-circle-close"></span>
        Item 3
    </li>
    <li class="ui-state-default">
        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        <span class="ui-icon ui-icon-circle-close"></span>
        Item 4
    </li>
<button id="clone" data-target="ui-state-default">clone</button>

CSS

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px;position: relative; }
#sortable li span {position: absolute;   margin-left: -1.3em; }


.ui-icon-arrowthick-2-n-s{
    cursor: move;
}

.ui-icon-circle-close{
    cursor: pointer;
}

.ui-icon-circle-close{
    right:3px
}



.ui-state-highlight { 
    height: 1.5em;
    line-height: 1.2em;
}

.ui-sortable-helper{
    color: #D14;
}

JavaScript

$( "#sortable" ).sortable({
    placeholder: "ui-state-highlight",
    items: "> li",
    distance: 10,
    handle: ".ui-icon-arrowthick-2-n-s"
});

$('body').on('click', '.ui-icon-circle-close',function(){
    var checkIfLast = '.'+$(this).attr("class").split(' ')[1],
        checkIfLast = $(checkIfLast).length;

    if (checkIfLast === 1){
        alert('You Cant Delete The Last One!');
        return false;
    } 
    
    $(this).parent().remove();
});

$('body').on('click', '#clone',function(){
    var $$target = '.'+$(this).data('target'),
        $$cloneTarget = $($$target).last().clone();
    $($$target).last().after($$cloneTarget);
});