JSFiddle - React, Tailwind, and code Playground

by Ben Schnell

HTML

<ul id="list1">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
</ul>

CSS

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: flex;
    flex-wrap: wrap;
    width: 300px;
}

li {
    cursor: move;
    margin: 1px;
    padding: 5px 20px;
    font-size: 20px;
    background-color: #ccc;
}

.ghost {
    opacity: .4;
}
}

JavaScript

function sortable(list1, list2, onUpdate){
    var dragEl;
    var clickEl;
    
    // Делаем всех детей перетаскиваемыми
    [].slice.call(list1.children).forEach(function (itemEl){
        itemEl.draggable = true;
    });
    
    
    
    // Фнукция отвечающая за сортировку
    function _onDragOver(evt){
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'move';
       
        var target = evt.target;
        if( target && target !== dragEl && target.nodeName == 'LI' ){
            // Сортируем
            list1.insertBefore(dragEl, target.nextSibling || target);
        }
    }
    
    // Окончание сортировки
    function _onDragEnd(evt){
        evt.preventDefault();
       
        dragEl.classList.remove('ghost');
        list1.removeEventListener('dragover', _onDragOver, false);
        list1.removeEventListener('dragend', _onDragEnd, false);

        // Сообщаем об окончании сортировки
        onUpdate(dragEl);
    }
    
    // Начало сортировки
    list1.addEventListener('dragstart', function (evt){
        dragEl = evt.target; // Запоминаем элемент который будет перемещать
        
        // Ограничиваем тип перетаскивания
        evt.dataTransfer.effectAllowed = 'move';
        evt.dataTransfer.setData('Text', dragEl.textContent);

        // Пописываемся на события при dnd
        list1.addEventListener('dragover', _onDragOver, false);
        list1.addEventListener('dragend', _onDragEnd, false);

        setTimeout(function (){
            // Если выполнить данное действие без setTimeout, то
            // перетаскиваемый объект, будет иметь этот класс.
            dragEl.classList.add('ghost');
        }, 0)
    }, false);
    
    
    // при клике - кидаем в соседний список
    list1.addEventListener('click', function (evt){ 
        clickEl = evt.target; // Запоминаем элемент который будет перемещать
        console.log(clickEl);
        list2.appendChild(clickEl); 
    }, false);
    
    // при клике - кидаем в соседний...