JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="drag_box box-min-4 ui-droppable">
    <div class="hd-b">Not Interested(23)</div>
    <div class="box-tx">
        <div box_num="4" class="draggable-list main_box">

            <div id="yw4" class="list-view">
<div class="items ui-sortable">
<div class="draggable-item ui-sortable-handle" lead_id="38">

    <a class="ajax" href="/lead/38">
        <div class="min-hd">test</div>
    </a>

    <div class="item">
        test&nbsp;
    </div>

    <div class="item">
        test&nbsp;
    </div>

    <div class="item">
        
    </div>

</div>
        </div>
    </div>
</div>

JavaScript

$(".drag_box").droppable({
        activate: function( event, ui ) {
            drag_box_num = ui.draggable.parents('.draggable-list').attr('box_num');
            is_drag = true;
        },
        drop : function(ev, ui) {

            var box_num= $(this).find('.draggable-list').attr('box_num');
            $('form input[name="box_num"]').val(box_num);

            if (box_num == drag_box_num) {
                return false;
            }

            var lead_id = ui.draggable.attr('lead_id');

            $('form input[name="lead_id"]').val(lead_id);

            return false;
        }
    });
    
    $('.ajax').on('click', function(){

        alert('bam!');

        return false;

    });
    
    $('.drag_box .items').sortable({
        //connectWith: '.box-min .draggable-list .items',
    });