Вы узнаете, как создавать сортируемые списки с помощью перетаскивания с использованием HTML, CSS и jаvascript. Помните, что мы не будем использовать какую-либо внешнюю библиотеку jаvascript для создания этого сортируемого списка, поэтому вы получите более глубокое понимание манипулирования DOM, обработки событий, манипулирования массивами и многого другого.

Сортируемые перетаскиванием списки — это широко используемый элемент пользовательского интерфейса, позволяющий пользователям изменять порядок элементов, перетаскивая их в нужное место. Эту функцию можно найти во многих веб-приложениях, таких как диспетчеры задач и веб-сайты электронной коммерции.

Вы можете посмотреть видео демонстрацию, попробовать сверстать самому по видео или скачать архив с готовым кодом. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.

В архиве находится:

• Все демонстрационные изображения
• Исходные файлы HTML
• Исходные файлы CSS
• Исходные файлы jаvascript
• Иконки шрифтов

Unicons:

<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

HTML КОД:

<ul class="sortable-list">
      <li class="item" draggable="true">
        <div class="details">
          <img src="images/img-1.jpg">
          <span>Kristina Zasiadko</span>
        </div>
        <i class="uil uil-draggabledots"></i>
      </li>
      <li class="item" draggable="true">
        <div class="details">
          <img src="images/img-2.jpg">
          <span>Gabriel Wilson</span>
        </div>
        <i class="uil uil-draggabledots"></i>
      </li>
      <li class="item" draggable="true">
        <div class="details">
          <img src="images/img-3.jpg">
          <span>Ronelle Cesicon</span>
        </div>
        <i class="uil uil-draggabledots"></i>
      </li>
      <li class="item" draggable="true">
        <div class="details">
          <img src="images/img-4.jpg">
          <span>James Khosravi</span>
        </div>
        <i class="uil uil-draggabledots"></i>
      </li>
      <li class="item" draggable="true">
        <div class="details">
          <img src="images/img-5.jpg">
          <span>Annika Hayden</span>
        </div>
        <i class="uil uil-draggabledots"></i>
      </li>
      <li class="item" draggable="true">
        <div class="details">
          <img src="images/img-6.jpg">
          <span>Donald Horton</span>
        </div>
        <i class="uil uil-draggabledots"></i>
      </li>
    </ul>

CSS КОД:

.sortable-list {
  width: 425px;
  padding: 25px;
  background: #fff;
  border-radius: 7px;
  padding: 30px 25px 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.sortable-list .item {
  list-style: none;
  display: flex;
  cursor: move;
  background: #fff;
  align-items: center;
  border-radius: 5px;
  padding: 10px 13px;
  margin-bottom: 11px;
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.06); */
  border: 1px solid #ccc;
  justify-content: space-between;
}
.item .details {
  display: flex;
  align-items: center;
}
.item .details img {
  height: 43px;
  width: 43px;
  pointer-events: none;
  margin-right: 12px;
  object-fit: cover;
  border-radius: 50%;
}
.item .details span {
  font-size: 1.13rem;
}
.item i {
  color: #474747;
  font-size: 1.13rem;
}
.item.dragging {
  opacity: 0.6;
}
.item.dragging :where(.details, i) {
  opacity: 0;
}

jаvascript КОД:

const sortableList = document.querySelector(".sortable-list");
const items = sortableList.querySelectorAll(".item");

items.forEach(item => {
    item.addEventListener("dragstart", () => {
        // Adding dragging class to item after a delay
        setTimeout(() => item.classList.add("dragging"), 0);
    });
    // Removing dragging class from item on dragend event
    item.addEventListener("dragend", () => item.classList.remove("dragging"));
});

const initSortableList = (e) => {
    e.preventDefault();
    const draggingItem = document.querySelector(".dragging");
    // Getting all items except currently dragging and making array of them
    let siblings = [...sortableList.querySelectorAll(".item:not(.dragging)")];

    // Finding the sibling after which the dragging item should be placed
    let nextSibling = siblings.find(sibling => {
        return e.clientY <= sibling.offsetTop + sibling.offsetHeight / 2;
    });

    // Inserting the dragging item before the found sibling
    sortableList.insertBefore(draggingItem, nextSibling);
}

sortableList.addEventListener("dragover", initSortableList);
sortableList.addEventListener("dragenter", e => e.preventDefault());