Jquery-ui sortable's placeholder stuck at the top

I have a problem with jquery-ui sortable's placeholder.

I'm trying to sort a collection of div and add a placeholder of where it would drop it.

Currently it seems like the placeholder is "stuck" at the top. It might be my css but i can't seem to find out what the problem is

I'm trying to make it as in the example from jquery ui

Demo

$(function() {
  $('#sortable').sortable({
    placeholder: 'ui-state-highlight',
  }).disableSelection();
});

.form_elements {
  width: 100%;
}

.form_elements ._element {
  width: 100%;
  display: block;
}

.form_elements ._element ._tu {
  float: left;
  width: 80px;
}

.form_elements ._element ._tu input[type=checkbox] {
  scale: 0.8;
  border-color: var(--bs-gray-500);
  float: left;
}

.form_elements ._element ._tu .number {
  float: right;
  padding-right: 15px;
  color: #6e6e6e;
}

.form_elements ._element ._elementContent {
  width: calc(100% - 80px);
  min-height: 10px;
  background-color: #fff;
  border: 1px solid #eaedf0;
  margin-bottom: 15px;
  float: left;
  padding: 10px;
}

.form_elements ._element ._elementContent .line {
  width: 100%;
}

.form_elements ._element ._elementContent .line.lh16 {
  line-height: 18px;
}

.form_elements ._element ._elementContent .line .icon {
  float: left;
  color: #6e6e6e;
  padding-right: 5px;
}

.form_elements ._element ._elementContent .line .icon i {
  font-size: 18px;
}

.form_elements ._element ._elementContent .line .title {
  float: left;
  color: #6e6e6e;
  font-size: 16px;
}

.form_elements ._element ._elementContent .line .rs {
  float: right;
  display: none;
}

.form_elements ._element ._elementContent .line .rs .settings {
  float: left;
  margin-right: 10px;
  font-size: 18px;
  cursor: pointer;
}

.form_elements ._element ._elementContent .line .rs .clone {
  float: left;
  margin-right: 10px;
  font-size: 18px;
  cursor: pointer;
}

.form_elements ._element ._elementContent .line .rs .move {
  float: left;
  font-size: 18px;
  cursor: pointer;
}

.form_elements ._element ._elementContent:hover .rs {
  display: block !important;
}

.ui-state-highlight {
  height: 50px;
  /* Adjust to match the height of your items */
  margin: 5px 0;
  /* Make sure to give some space to see where it will be dropped */
  border: 2px dashed #ccc;
  /* To visually distinguish the placeholder */
  background-color: rgba(240, 240, 240, 0.5);
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"
  integrity="sha256-J8ay84czFazJ9wcTuSDLpPmwpMXOm573OUtZHPQqpEU="
  crossorigin="anonymous"></script>
<div class="form_elements ui-sortable" id="sortable">
  <div class="_element" data-index="1">
    <div class="_tu">
      <input type="checkbox" class="form-check-input" />
      <div class="number">2.</div>
    </div>
    <div class="_elementContent">
      <div class="line lh16">
        <div class="icon">
          <i class="fa fa-hashtag"></i>
        </div>
        <div class="title">Number</div>
        <div class="rs">
          <div class="settings">
            <i class="flaticon-clipboard"></i>
          </div>
          <div class="clone">
            <i class="flaticon-background"></i>
          </div>
          <div class="move">
            <i class="flaticon2-resize"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="_element" data-index="2">
    <div class="_tu">
      <input type="checkbox" class="form-check-input" />
      <div class="number">3.</div>
    </div>
    <div class="_elementContent">
      <div class="line lh16">
        <div class="icon">
          <i class="fa fa-hashtag"></i>
        </div>
        <div class="title">Number</div>
        <div class="rs">
          <div class="settings">
            <i class="flaticon-clipboard"></i>
          </div>
          <div class="clone">
            <i class="flaticon-background"></i>
          </div>
          <div class="move">
            <i class="flaticon2-resize"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="_element" data-index="3">
    <div class="_tu">
      <input type="checkbox" class="form-check-input" />
      <div class="number">4.</div>
    </div>
    <div class="_elementContent">
      <div class="line lh16">
        <div class="icon">
          <i class="flaticon2-sort-alphabetically"></i>
        </div>
        <div class="title">Text</div>
        <div class="rs">
          <div class="settings">
            <i class="flaticon-clipboard"></i>
          </div>
          <div class="clone">
            <i class="flaticon-background"></i>
          </div>
          <div class="move">
            <i class="flaticon2-resize"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="_element" data-index="0" style="">
    <div class="_tu">
      <input type="checkbox" class="form-check-input" />
      <div class="number">1.</div>
    </div>
    <div class="_elementContent">
      <div class="line lh16">
        <div class="icon">
          <i class="flaticon2-sort-alphabetically"></i>
        </div>
        <div class="title">Text</div>
        <div class="rs">
          <div class="settings">
            <i class="flaticon-clipboard"></i>
          </div>
          <div class="clone">
            <i class="flaticon-background"></i>
          </div>
          <div class="move">
            <i class="flaticon2-resize"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Solution

You need to assign a value for height of each draggable element and the placeholder (also need to style the placeholder a bit to make it fit, which I don't include in the code snippet since it's up to your preference)

$(function() {
  $('#sortable').sortable({
    placeholder: 'ui-state-highlight',
  }).disableSelection();
});

.form_elements {
  width: 100%;
}

.form_elements ._element {
  width: 100%;
  height: 59px; /* add height */
  display: block;
}

.form_elements ._element ._tu {
  float: left;
  width: 80px;
}

.form_elements ._element ._tu input[type=checkbox] {
  scale: 0.8;
  border-color: var(--bs-gray-500);
  float: left;
}

.form_elements ._element ._tu .number {
  float: right;
  padding-right: 15px;
  color: #6e6e6e;
}

.form_elements ._element ._elementContent {
  width: calc(100% - 80px);
  min-height: 10px;
  background-color: #fff;
  border: 1px solid #eaedf0;
  margin-bottom: 15px;
  float: left;
  padding: 10px;
}

.form_elements ._element ._elementContent .line {
  width: 100%;
}

.form_elements ._element ._elementContent .line.lh16 {
  line-height: 18px;
}

.form_elements ._element ._elementContent .line .icon {
  float: left;
  color: #6e6e6e;
  padding-right: 5px;
}

.form_elements ._element ._elementContent .line .icon i {
  font-size: 18px;
}

.form_elements ._element ._elementContent .line .title {
  float: left;
  color: #6e6e6e;
  font-size: 16px;
}

.form_elements ._element ._elementContent .line .rs {
  float: right;
  display: none;
}

.form_elements ._element ._elementContent .line .rs .settings {
  float: left;
  margin-right: 10px;
  font-size: 18px;
  cursor: pointer;
}

.form_elements ._element ._elementContent .line .rs .clone {
  float: left;
  margin-right: 10px;
  font-size: 18px;
  cursor: pointer;
}

.form_elements ._element ._elementContent .line .rs .move {
  float: left;
  font-size: 18px;
  cursor: pointer;
}

.form_elements ._element ._elementContent:hover .rs {
  display: block !important;
}

.ui-state-highlight {
  height: 55px; /* add height */
  /* Adjust to match the height of your items */
  margin: 5px 0;
  /* Make sure to give some space to see where it will be dropped */
  border: 2px dashed #ccc;
  /* To visually distinguish the placeholder */
  background-color: rgba(240, 240, 240, 0.5);
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"
  integrity="sha256-J8ay84czFazJ9wcTuSDLpPmwpMXOm573OUtZHPQqpEU="
  crossorigin="anonymous"></script>
<div class="form_elements ui-sortable" id="sortable">
  <div class="_element" data-index="1">
    <div class="_tu">
      <input type="checkbox" class="form-check-input" />
      <div class="number">2.</div>
    </div>
    <div class="_elementContent">
      <div class="line lh16">
        <div class="icon">
          <i class="fa fa-hashtag"></i>
        </div>
        <div class="title">Number</div>
        <div class="rs">
          <div class="settings">
            <i class="flaticon-clipboard"></i>
          </div>
          <div class="clone">
            <i class="flaticon-background"></i>
          </div>
          <div class="move">
            <i class="flaticon2-resize"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="_element" data-index="2">
    <div class="_tu">
      <input type="checkbox" class="form-check-input" />
      <div class="number">3.</div>
    </div>
    <div class="_elementContent">
      <div class="line lh16">
        <div class="icon">
          <i class="fa fa-hashtag"></i>
        </div>
        <div class="title">Number</div>
        <div class="rs">
          <div class="settings">
            <i class="flaticon-clipboard"></i>
          </div>
          <div class="clone">
            <i class="flaticon-background"></i>
          </div>
          <div class="move">
            <i class="flaticon2-resize"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="_element" data-index="3">
    <div class="_tu">
      <input type="checkbox" class="form-check-input" />
      <div class="number">4.</div>
    </div>
    <div class="_elementContent">
      <div class="line lh16">
        <div class="icon">
          <i class="flaticon2-sort-alphabetically"></i>
        </div>
        <div class="title">Text</div>
        <div class="rs">
          <div class="settings">
            <i class="flaticon-clipboard"></i>
          </div>
          <div class="clone">
            <i class="flaticon-background"></i>
          </div>
          <div class="move">
            <i class="flaticon2-resize"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="_element" data-index="0" style="">
    <div class="_tu">
      <input type="checkbox" class="form-check-input" />
      <div class="number">1.</div>
    </div>
    <div class="_elementContent">
      <div class="line lh16">
        <div class="icon">
          <i class="flaticon2-sort-alphabetically"></i>
        </div>
        <div class="title">Text</div>
        <div class="rs">
          <div class="settings">
            <i class="flaticon-clipboard"></i>
          </div>
          <div class="clone">
            <i class="flaticon-background"></i>
          </div>
          <div class="move">
            <i class="flaticon2-resize"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>