JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<div class="receiver sortable">
    <div class="item">receiver</div>
</div>
<div class="sender sortable">
    <div class="item">item1</div>
    <div class="item">item2</div>
</div>

CSS

.receiver {
    width : 200px;
    margin : 50px 0px 50px 0px;
    min-height: 50px;
}

.receiver > .item {
    height : 20px;
    background-color : red;    
}

.sender {
    width : 200px;    
    min-height: 50px;
}

.sender > .item {
    height : 30px;
    color : white;
    background-color : blue;
}

.placeholder {
    height : 30px;
    border : 1px dashed;
}

JavaScript

$(".sortable").sortable({connectWith:".sortable", placeholder:"placeholder"});