JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dToolbar draggable">
            <li class="">q1 </li>
            <li class="">q2</li>
        </ul>
        
        <div class="dwbContainer">
            <ul class="dqContainer sortable">
                <li>block</li>
                
            </ul>
                
            
        </div>

CSS

.dToolbar{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 2px 2px 2px  2px;
    position: fixed;
    left: 0;
    top: 185px;
}

.dwbContainer{
    height: 400px;
    border: dotted;
    border-width:   1px;
    margin: 0 0 0 20px;
}

.placeHolder{
    width: 20px;
    border: dotted;
    border-width:   1px;
    background-color: #967939;
}

JavaScript

$(".sortable").sortable({
            revert: true,
            placeholder: "placeHolder",
                stop: function(event, ui){
                alert(asdasd);
                        }
            
            });
        $(".draggable li").draggable({
            connectToSortable: ".dqContainer",
            helper: "clone",
            revert: "invalid"
        });
        $("ul li").disableSelection();