JSFiddle - React, Tailwind, and code Playground

by krampstudio

HTML

<ul id='list1'>
    <li>item 1</li>
    <li>item 2</li>
</ul>
<ul id='list2'>
    <li>item 3</li>
    <li>item 4</li>
</ul>

CSS

ul {
    height: 200px;
    border: solid 1px grey;
    float: left;
    margin:0 0 0 100px;
    padding:0;
    width: 200px;
    list-style-type: none;
}
li {
    margin:0;
    padding:0;
    border: solid 1px grey;
    background-color: #eee;
    padding: 5px;
}
.placeholder {
    height : 1.5em;
    border: dashed 1px #ccc;
    margin-left: 15px;
}

JavaScript

$('#list1 li').draggable({
            helper : 'clone',
            scroll: false,
            revert: 'invalid',
            opacity: 0.8,
            connectToSortable: '#list2'
        });

$('#list2').droppable({
    accept : "#list1 li",
    activeClass : 'active',
    hoverClass : 'valid',
    greedy: true,
    tolerance: 'pointer',
    drop: function(event, ui) {
        $(this).append('<li>' + $(ui.draggable).text() + ' dropped </li>');
    }
}).sortable({
    containement : 'parent',
    placeholder : 'placeholder'
});