Drag and Drop — umetbaev

function DragOver(event){
  event.preventDefault();
};

competitorList.addEventListener("dragstart", (event) =>DropStart(event));
keyCompetitors.addEventListener("dragstart", (event) =>DropStart(event));
directCompetitors.addEventListener("dragstart", (event) =>DropStart(event));
indirectCompetitors.addEventListener("dragstart", (event) =>DropStart(event));

keyCompetitors.addEventListener("dragover", (event) =>DragOver(event));
keyCompetitors.addEventListener("drop", (event)=> DropCompetitor(event, keyCompetitors));

directCompetitors.addEventListener("dragover", (event)=> DragOver(event));
directCompetitors.addEventListener("drop", (event)=>DropCompetitor(event, directCompetitors));

indirectCompetitors.addEventListener("dragover", (event)=> DragOver(event));
indirectCompetitors.addEventListener("drop", (event)=>DropCompetitor(event, indirectCompetitors));

body {
  font-family: sans-serif; /* Используем стандартный шрифт без засечек */
}

#headDocument {
  text-align: center; /* Заголовок по центру */
  font-size: 2em; /* Размер заголовка */
  margin-bottom: 20px; /* Отступ снизу */
  font-weight: bold; /* Жирный шрифт */
}

#competitorList {
  border: 1px solid #ccc; /* Тонкая серая рамка */
  padding: 10px; /* Внутренний отступ */
  border-radius: 5px; /* Скругленные углы */
  margin-bottom: 20px; /* Отступ снизу */
  background-color: #f9f9f9; /* Светло-серый фон */
}

#competitorList ul {
  list-style: none; /* Убираем маркеры списка */
  padding: 0; /* Убираем отступы у списка */
}

#competitorList li {
  padding: 8px 12px; /* Отступ внутри элементов списка */
  border-bottom: 1px solid #eee; /* Тонкая серая линия между элементами */
  cursor: move; /* Изменяем курсор на иконку перемещения при наведении */
  background-color: white; /* белый фон элементов */
}

#competitorList li:last-child {
  border-bottom: none; /* Убираем нижнюю линию у последнего элемента */
}

#keyCompetitors, #directCompetitors, #indirectCompetitors {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  min-height: 50px; /* Минимальная высота для контейнеров */
  display: flex;
  align-items: center; /* Выравнивание по вертикали */
}

#keyCompetitors h3, #directCompetitors h3, #indirectCompetitors h3 {
    margin: 0; /* Убираем стандартные отступы */
    margin-right: 10px; /* Отступ справа от текста */
}

Results:

Конкуренты авиакомпании "Победа"

АО Аэрофлот
Fly Emirates
РЖД
Личный автомобиль
Уральские авиалинии
S7 Airlines

Results:

Ключевые конкуренты

Прямые конкуренты

Косвенные конкуренты