JSFiddle - React, Tailwind, and code Playground

HTML

<div class="products-list" style="width: 155px; height: 288px;">
    <div prod_id="102" style="width:50px" class="product">102</div>
    <div prod_id="1" style="width:50px" class="product">1</div>
    <div prod_id="2" style="width:50px" class="product">2</div>
    <div prod_id="3" style="width:50px" class="product">3</div>
</div>
<div class="products-list" style="width: 155px; height: 288px;">
    <div prod_id="5" style="width:50px" class="product">5</div>
    <div prod_id="6" style="width:50px" class="product">6</div>
    <div prod_id="7" style="width:50px" class="product">7</div>
    <div prod_id="102" style="width:50px" class="product">102</div>
</div>

JavaScript

$('div.products-list').sortable({
    connectWith: '.products-list',
    placeholder: 'ui-state-highlight',
    items: 'div.product',
    revert: 200,
    receive: function(event, ui) {
        var prod_id = ui.item.attr("prod_id");
        
        if ($(this).find(".product[prod_id='" + prod_id + "']").length > 1) {
            ui.sender.sortable("cancel");
        }
    }
});