JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cart">
     <h1 class="ui-widget-header">Demonstration Site</h1>

    <div class="content ui-widget-content">
        <ol id="insert-zone" class="ui-droppable ui-sortable">
          
            <div class="item-container cart-item">Item 1<br/><div>Dont move me here</div></div>
                <div class="item-container cart-item">Item 2</div>
              <div class="item-container cart-item">Item 22</div>
          </ol>
    </div>
</div>

<div class='danger'>
</div>

CSS

.danger{
    background-color:red;
    height:300px;
    width:100%;
}

JavaScript

$('.content').sortable({
    items: "div.item-container", //prevents objects from dragging
    sort: function () {
        $(this).removeClass("ui-state-default");
        if ($(this).class != "cart-item") var position = $(this).offset();
        console.log($(this).class != "cart-item");
    }
});