JSFiddle - React, Tailwind, and code Playground

by jcano

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="container">
    <div class="list">
        <div class="element">text 1</div>
        <div class="element">text 2</div>
    </div>
</div>
<div class="container">
    <div class="list">
        <div class="element">text 1</div>
        <div class="element">text 2</div>
        <div class="element">text 3</div>
    </div>
</div>

CSS

.container {
    overflow: hidden;
    min-height: 30px;
    width: 100px;
    margin: 10px;
    border: 1px solid gray;
}
.list {
    height: 100%;
}
.element {
    height: 30px;
    padding: 5px;
    border: 1px white solid;
    background-color: #59BBDF;
    color: white;
    text-align: center;
}
.placeholder {
    height: 30px;
    width: 100%;
    background-color: #40A0C0;
    border: 1px white solid;
}

JavaScript

$(function () {
    $(".list").sortable({
        connectWith: ".list",
        helper: "clone",
        placeholder: "placeholder",
        tolerance: "pointer",
        dropOnEmpty: true,
        
        over: function () {
        	console.log("Over a list");
    	},
        
        out: function () {
            console.log("Out of a list");
        }
    });
})