jQuery ui sortable добавление placeholder

Question

Подскажите пожалуйста, каким способом можно сделать так, что бы первый элемент можно было поставить после 3, но что бы третий остался на своем месте (второй ряд слева).

$(function() {
  $("#drag_block").sortable({
    scroll: false,
    containment: "#drag_block",
    placeholder: "sortable-placeholder",
    update: function(event, ui) {
            console.log($(ui.item).index());
        },
  });
});

#drag_block {
  width: 250px;
  padding: 10px;
}

#drag_block div {
  border: 1px solid;
  width: 100px;
  height: 100px;
  background: blue;
  display: inline-block;
  vertical-align: top;
  margin: 10px;
}

.sortable-placeholder {
  width: 100px;
  height: 100px;
  background: red!important;
}

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.0-rc.2/jquery-ui.js" integrity="sha256-bLjSmbMs5XYwqLIj5ppZFblCo0/9jfdiG/WjPhg52/M=" crossorigin="anonymous"></script>
<div id="drag_block">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

БЛОГ НА HUSL

jQuery ui sortable добавление placeholder

Ответы (0 шт):