JSFiddle - React, Tailwind, and code Playground

by musicreader

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxdata.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxlistbox.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxdragdrop.js"></script>
 <div id="listBox"></div>
 <select id="typeDropdown">
    <option value="NAME">NAME</option>
    <option value="NAME2">NAME2</option>
</select>
<button id="addButton">Add</button>

CSS

.list-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .handle {
            cursor: move;
        }
        .custom-layout {
            flex-grow: 1;
            padding: 0 10px;
        }
        
        .jqx-listbox .jqx-listitem-element:nth-child(odd) {
    background-color: #f9f9f9; /* Light background color for odd items */
}

.jqx-listbox .jqx-listitem-element:nth-child(even) {
    background-color: #e9e9e9; /* Slightly darker background color for even items */
}

.jqx-listbox .jqx-listitem-state-hover {
    background-color: transparent !important; /* Remove the background color change on hover */
    cursor: default !important; /* Remove the pointer cursor on hover */
    border: 0px;
}

JavaScript

// Initial data array
        const data = [
            { type: "NAME" },
            { type: "NAME2" }
        ];
        
        function reloadData(){
        	$('#listBox').jqxListBox({
            source: data.map((item, index) => ({
                label: `
                    <div class="list-item">
                        <div class="handle">☰</div>
                        <div class="custom-layout">${index} ${item.type}</div>
                        <button class="remove-button" data-index="${index}">Remove</button>
                    </div>
                `,
                value: index
            }))
            });
        }

        // Create jqxListBox
        $('#listBox').jqxListBox({
            width: '300px',
            height: '300px',
            allowDrag: true,
            allowDrop: true,
            enableSelection: false,
            dragEnd: function (dragItem, dropItem) 
            {
            		var index1=dragItem.index;
                var index2=dropItem.index;
                console.log("from index:"+index1+" to:"+index2);
                if (index1 < 0 || index1 >= data.length || index2 < 0 || index2 >= data.length) {
        throw new Error("Invalid index");
    }

              console.log(JSON.stringify(data));
              const item = data.splice(index1, 1)[0];
              data.splice(index2, 0, item);
              console.log(JSON.stringify(data));
              setTimeout(reloadData,1000);
              //reloadData();

            }
        });
        reloadData();

        // Add event listener for remove buttons
        $('#listBox').on('click', '.remove-button', function () {
            const index = $(this).data('index');
            data.splice(index, 1);
            reloadData();
        });

        // Enable drag and drop reordering
        $('#listBox').on('mousedown', '.handle', function (event) {
            const item = $(this).closest('.jqx-listitem-element');
            const index =...