JSFiddle - React, Tailwind, and code Playground

by musicreader

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.darkblue.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxlistbox.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxdragdrop.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
    <div id="listbox"></div>
    <button id="addNewBtn">Add New</button>

CSS

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
}
.list-item-handle {
  cursor: move;
  margin-right: 10px;
}
.list-item-content {
  flex-grow: 1;
}
.list-item-remove {
  margin-left: 10px;
}

JavaScript

var order = [
            {type: "area", id: "50"},
            {type: "area", id: "52"},
            {type: "icon", id: "5"},
            {type: "icon", id: "6"}
        ];

        function arrayUpdatedFunction() {
            console.log("Array Updated:", order);
        }

        function itemSelected(index) {
            console.log("Item Selected at Index:", index);
        }

        function renderItems() {
            $('#listbox').jqxListBox('clear');
            order.forEach((item, index) => {
                $('#listbox').jqxListBox('addItem', {
                    html: `<div class="list-item">
                            <div class="list-item-handle">&#x2630;</div>
                            <div class="list-item-content">
                                <strong>${item.type}</strong>: ${item.id}
                            </div>
                            <button class="list-item-remove" onclick="removeItem(${index})">Remove</button>
                           </div>`,
                    value: index
                });
            });
        }

        function removeItem(index) {
            order.splice(index, 1);
            renderItems();
            arrayUpdatedFunction();
        }

        $(document).ready(function () {
            $("#listbox").jqxListBox({
                width: 400,
                height: 200,
                source: order.map((item, index) => ({
                    html: `<div class="list-item">
                            <div class="list-item-handle">&#x2630;</div>
                            <div class="list-item-content">
                                <strong>${item.type}</strong>: ${item.id}
                            </div>
                            <button class="list-item-remove" onclick="removeItem(${index})">Remove</button>
                           </div>`,
                    value: index
                })),
                allowDrag: true,
                allowDrop: true
            });

    ...