JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<ul id="selectable" class="ips-selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
</ul>

CSS

.ips-selectable .ui-selecting {background: #FECA40;}
.ips-selectable .ui-selected {background: #F39814; color: white;}
.ips-selectable {margin: 0; padding: 0; padding:0; border:solid 1px #DDD;}
#selectable {height: 210px;}
.ips-selectable li {margin: 0; padding:10px; border:solid 1px #CCC; width: 100px; height:20px;}
.ui-selectable-helper {position: absolute; z-index: 100; border:1px dotted black;}

JavaScript

var param = [{ text: 'test1', code: '', id: '' }, { text: 'test2', code: '', id: '' }, { text: '', code: '', id: ''}];
param[3] = { text: 'test4', code: '', id: '' };
alert(param[0].text);
alert(param[3].text);
$( ".ips-selectable li" ).draggable({
    appendTo: "body",
    helper: function () {
        var selected = $(this).closest(".ips-selectable").find('.ui-selected, .ui-selecting');
        if (selected.length === 0) {
            selected = $(this);
        }
        var container = $('<ul/>').attr('class', 'ips-selectable');
        container.append(selected.clone());
        return container;
    },
    revert: "invalid"
});

$( "#selectable" ).selectable();

// manually trigger the "select" of clicked elements
$( ".ips-selectable li" ).click( function(e){
    if (e.metaKey == false) {
        // if command key is pressed don't deselect existing elements
        $( ".ips-selectable li" ).removeClass("ui-selected");
        $(this).addClass("ui-selecting");
    }
    else {
        if ($(this).hasClass("ui-selected")) {
            // remove selected class from element if already selected
            $(this).removeClass("ui-selected");
        }
        else {
            // add selecting class if not
            $(this).addClass("ui-selecting");
        }
    }
    
    $( ".ips-selectable" ).data("selectable")._mouseStop(null);
});