JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
</ul>
<header>
    <div id="col1" class="cl">Column 1 </div>
    <div id="col2" class="cl">Column 2 </div>
</header>

CSS

*{
    padding:0;
    margin:0;
}

ul,li{

    list-style:none;
    
}

ul{
    
    width:15em;
    padding:20px;
}

li {
    padding:5px;
    background:lightgray;
    border-bottom:1px dashed lightblue;
    border-radius: 20px;
    margin-bottom: 3px;
}

.listHighlight{
    border:1px dashed darkgray;
}

header{
    display:block;
    border:1px solid gray;
    overflow:auto;
    height:100%;
}

.cl{
    float:left;
    width:46%;
    padding:2%;
    box-sizing:border-box;
}

#col1{
    background:brown;
}

#col2{
    background:orange;
}

.highLight{
    border:3px solid blue;
}

JavaScript

var generate = function (id) {
   
  var id = "#" + id, c = 0, ul = $("<ul />");
    
  $(id).empty();
    
    while(c < 10 ) {
      c ++;  
        ul.append($("<li />", { text : c + " new list"}));
    }
    
    return ul;
    
}


$("li").draggable({
    
    revert:true,
    helper: "clone"

});

$(".cl").droppable({
    accept: "li",
    activeClass : "highLight",
    over: function( event, ui ) {
        
        if (event.target._generated)
            return;
        
        event.target._generated = true;
       
       var elements = generate(event.target.id);
        
        $("#" + event.target.id).append(elements);
        
        $(".cl li").droppable({
            over : function (event, ui ){
                console.log("it is over now!");
            },
            drop : function (event, ui) {
                ui.draggable.appendTo(this);
            },
            
            out : function () {
                console.log ("out");
            }
        });
        
    }
});