JSFiddle - React, Tailwind, and code Playground

by ktstowell

HTML

<div id="wrapper">
    <div id="left">
        <ul id="ul-left">
            <li>ONE-left</li>
            <li>TWO-left</li>
            <li>THREE-left</li>
        </ul>
    </div>
    <div id="right">
        <ul id="ul-right">
        </ul>
    </div>
</div>

CSS

#wrapper {
    width: 450px;
    border: 1px solid #333;
    padding:10px;
    height:150px;
    margin: 30% auto;
    text-align:center;
}

#left {
    width:205px;
    float:left;
    border:1px solid #666;
    height:150px;
    overflow-y: scroll;
}

#ul-left li {
    background-color: #FFD;
    border:1px solid white;
    padding:2px;
    text-align:center;
}

#right {
    width:205px;
    float:right;
    border:1px solid #666;
    height: 150px;
    overflow-y:scroll;
}

#ul-right li {
    background-color: #FFD;
    border:1px solid white;
    padding:2px;
    text-align:center;
}

JavaScript

$('#wrapper li').click(function() {
        if ($(this).is('.selected')){
            $(this).removeClass('selected').css({'background-color':'#FFD'});
        } else {
           $(this).addClass('selected').css({'background-color':'#FFA'}); 
        }    
    });
    
    var mouseover = false;
    var gtfo = false;
    
    $('#right').mouseenter(
      function () {
         mouseover = true;
          console.log('ding ding ding');
      }).mouseleave(function () {
         mouseover = false;
        console.log('dong dong dong');
    });
    
    //Sortable config
    $('#ul-right').sortable({
        cursor:'move',
        helper:'clone',
        scroll:false,
        items: 'li',
        stop:function (e, ui) {
          if(gtfo){
             ui.item.remove();
             gtfo = false;
          }
        },
        zIndex:200
    }).disableSelection();

    //Draggable Config
    $('#ul-left li').draggable({
        disabled:false,
        connectToSortable:'#ul-right',
        cursor:'move',
        cursorAt:{top:-10},
        helper:function (e, ui) {
            var selected = $('#ul-left .selected');
            if (selected.length === 0) {
                selected = $(this);
            }
            var container = $('<div></div>').attr('id', 'draggingContainer');
            container.append(selected.clone());
            return container;
        },
        scroll:false,
        zIndex:200,
        start:function (e, ui) {

        },
        drag:function (e, ui) {

        },
        stop:function (e, ui) {
          $('.selected').each(function() {
              selectHndlr(this)
          });
        }
    });
    
    $('#ul-right').droppable({
        drop:function (e, ui) {
            if ($('#ul-left .selected').length >= 1) {
                console.log(mouseover);
                if (mouseover == true) {
                    $('#ul-right').append(ui.helper.children());
                    gtfo = true;
                }
            }
  ...