JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

    <div class="div-container">
        <ul class="ul-list">
            <li><div class="div-contex">Item A1</div><div class="div-sortablehandle">&nbsp;</div></li>
            <li><div class="div-contex">Item A2</div><div class="div-sortablehandle">&nbsp;</div></li>
            <li><div class="div-contex">Item A3</div><div class="div-sortablehandle">&nbsp;</div></li>
            <li><div class="div-contex">Item A4</div><div class="div-sortablehandle">&nbsp;</div></li>
            <li><div class="div-contex">Item A5</div><div class="div-sortablehandle">&nbsp;</div></li>
        </ul>

        <ul class="ul-list">
            <li><div class="div-contex">Item B1</div><div class="div-sortablehandle">&nbsp;</div></li>
            <li><div class="div-contex">Item B2</div><div class="div-sortablehandle">&nbsp;</div></li>
            <li><div class="div-contex">Item B3</div><div class="div-sortablehandle">&nbsp;</div></li>
            <li><div class="div-contex">Item B4</div><div class="div-sortablehandle">&nbsp;</div></li>
            <li><div class="div-contex">Item B5</div><div class="div-sortablehandle">&nbsp;</div></li>
        </ul>

        <ul class="ul-list">
            <li><div class="div-contex">Item C1</div><div class="div-sortablehandle">&nbsp;</div></li>
            <li><div class="div-contex">Item C2</div><div class="div-sortablehandle">&nbsp;</div></li>
            <li><div class="div-contex">Item C3</div><div class="div-sortablehandle">&nbsp;</div></li>
            <li class="li-sortdisabled"><div class="div-contex">Item C4</div><div class="div-sortablehandle">&nbsp;</div></li>
            <li><div class="div-contex">Item C5</div><div class="div-sortablehandle">&nbsp;</div></li>
        </ul>
    </div>

CSS

.ui-selectable-helper {
            position: absolute;
            z-index: 100;
            border: 1px solid orange;
        }

        .ul-list {
            list-style: none;
            white-space: nowrap;
            padding: 0;
            margin: 25px 0px;
        }

            .ul-list li {
                display: inline-block;
                float: none;
                cursor: default;
                width: 60px;
                height: 16px;
                margin-right: 8px;
                background-color: whitesmoke;
                text-align: center;
                border: 1px solid darkgray;
            }

                .ul-list li > div {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    display: inline-block;
                }

                .ul-list li > .div-contex {
                    z-index: 1;
                    background-color: yellow;
                }

                .ul-list li.li-sortdisabled .div-contex {
                    background-color: whitesmoke;
                }


                .ul-list li .div-sortablehandle {
                    display: none;
                    z-index: 2;
                    background-color: gray;
                    opacity: 0.5;
                    left: -100%;
                }

                .ul-list li.ui-selected .div-sortablehandle {
                    display: inline-block;
                }

        .li-placeHolder {
            outline: 1px dotted gray !important;
            border: none !important;
            visibility: visible !important;
        }

        .transporter {
           
        }

        .transporter > li {
             
                display: block;
                float: none;
                cursor: default;
                width: 60px;
                height: 16px;
                margin-right: 8px;
                background-color: whitesmoke;
               ...

JavaScript

$(function () {

            $('.div-container').selectable({
                cancel: '.div-sortablehandle',
                filter: "li",
                //tolerance: "fit"
            });



            $('.div-container').sortable({
                cursorAt: { top:10, left:25 },
                placeholder: "li-placeHolder",
                connectWith: ".ul-list",
                items: "ul>li",
                handle: '.div-sortablehandle',
                helper: function (e, item) {
                    if (!item.hasClass('ui-selected')) {
                        $('.div-container ul').find('.ui-selected').removeClass('ui-selected');
                        item.addClass('ui-selected');
                    }

                    var selected = $('.ui-selected').clone();
                    item.data('multidrag', selected);
                    $('.ui-selected').not(item).remove();
                    return $('<li class="transporter" />').append(selected);
                },
                stop: function (e, ui) {
                    var selected = ui.item.data('multidrag');
                    ui.item.after(selected);
                    ui.item.remove();
                }
            }).disableSelection();




        });