Как работает drag n drop при сортировки элементов?

Question

[Sergey750il]

Доброго времени суток. Как работает drag n drop при переносе между блоками понятно, а как при сортировки элементов списка понять не могу. Как уловить, что элемент перескочил за "соседа" и соответственно узнать на что менять индекс элемента в модели?

Comments

[Aetae]

Как-то работает. Код то где? Используемые библиотеки?

[Sergey750il]

Aetae, На Vue работает. Как такового кода нет, только набросок с возможностью перетаскивания элементов.

<template>
  <div class="container">
    <section class="tasks">
      <h1 class="tasks__title">To do list</h1>

      <ul class="tasks__list" v-for="item in md" :key="item">
        <li
          class="tasks__item"
          draggable="true"
          @dragstart="onDragStart($event, item)"
          @dragend="onDragEnd($event, item)"
        >
          {{ item }}
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      md: ["learn HTML", "learn CSS"],
    };
  },
  name: "Home",
  methods: {
    onDragStart(e, item) {
      console.log(e);
      e.target.classList.toggle("selected");
     e.dataTransfer.dropEffect = "move";
      e.dataTransfer.effectAllowed = "move";
    //  e.dataTransfer.setData("itemId", item.id.toString());
    },
    onDragEnd(e, item) {
      alert("end");
      e.target.classList.toggle("selected");
    },
  },
};
</script>
<style>
body {
  font-family: "Tahoma", sans-serif;
  font-size: 18px;
  line-height: 25px;
  color: #164a44;

  background-color: #b2d9d0;
}
.container {
  display: flex;
  justify-content: center;
}

.tasks__title {
  margin: 50px 0 20px 0;

  text-align: center;
  text-transform: uppercase;
}

.tasks__list {
  margin: 0;
  padding: 0;

  list-style: none;
}

.tasks__item {
  max-width: 250px;
  margin-bottom: 10px;
  padding: 5px;

  text-align: center;
  border: 2px dashed #b2d9d0;
  border-radius: 10px;
  cursor: move;
  background-color: #dff2ef;

  transition: background-color 0.5s;
}

.tasks__item:last-child {
  margin-bottom: 0;
}

.selected {
  opacity: 0.3;
  background: red;
}
</style>

[monax33349]

https://sortablejs.github.io/Vue.Draggable/#/simple
Можете поможете