JSFiddle - React, Tailwind, and code Playground

by jecker

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="noDvi lay01">
  <div class="moveDvi">
    test 01
  </div>
  <div class="noMove lay01">
    <div class="moveDvi">
      test 02
    </div>
    <div class="noMove lay01">
      <div class="moveDvi">
        test 03
      </div>
       <div class="noMove lay01">
        <div class="moveDvi">
          test 04
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.lay01 { margin-left: 10px; }

.placeHolder {
  border-style: dashed;
  border-color: #000;
  height: 15px;
}

JavaScript

$(".moveDvi").sortable({
connectwith: ".noMove",
placeholder: "placeHolder",
});