JSFiddle - React, Tailwind, and code Playground

by stefanu

HTML

<div id="sortable">
    <div class="item typea">typea1</div>
    <div class="item typea">typea2</div>
    <div class="item typea">typea3</div>
    <div class="item typea">typea4</div>
    
    <div class="item typeb">typeb1</div>
    <div class="item typeb">typeb2</div>
    <div class="item typeb">typeb3</div>
    <div class="item typeb">typeb4</div>
    <div class="item typeb">typeb5</div>
    
    
    <div class="item typec">typec1</div>
    <div class="item typec">typec2</div>
    <div class="item typec">typec3</div>
    <div class="item typec">typec4</div>
    <div class="item typec">typec5</div>
    <div class="item typec">typec6</div>
</div>

CSS

#sortable {}

.item {
  cursor: move;
  padding: 0.1rem;
}

.typea {
  background: blue;
}

.typeb {
  background: green;
}

.typec {
  background: red;
}

JavaScript

$("#sortable").sortable({
    change: function(event, ui) {
        var currentClass = $(ui.placeholder)[0].classList[1];
        if (!$(ui.placeholder).prev().hasClass(currentClass) &&
            !$(ui.placeholder).next().hasClass(currentClass))
            return false;
    },
    move: function(event, ui) {
    }
});
$("#sortable").disableSelection();