JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div id="list-1">
    <div class="list-item">Item 1</div>
    <div class="list-item">Item 2</div>
    <div class="list-item">Item 3</div>
    <div class="list-item">Item 4</div>
</div>

<div id="list-2">
    <div class="list-item" class="placeholder"></div>
    <div class="list-item" class="placeholder"></div>
    <div class="list-item" class="placeholder"></div>
    <div class="list-item" class="placeholder"></div>  
</div>

CSS

#list-1 {
    float:left;   
    border: 1px solid #DADADA;
    background: #FAFAFA;
    margin-right:10px;
    padding:10px;
}

#list-2 {
    float:left;
    border: 1px solid #DADADA;
    background: #FAFAFA;
    padding:10px;
}

.list-item {cursor:pointer;}

.placeholder {height:20px;border:1px dashed black;padding:10px; width:50px;}

JavaScript

$('#list-1').sortable({
    connectWith: '#list-2'
});
$('#list-2').sortable();