Главная
Проекты на Vue
Интерактивный компонент Drag-and-Drop на Vue

Интерактивный компонент Drag-and-Drop на Vue

Создание интерактивных интерфейсов с функцией перетаскивания (Drag-and-Drop) может быть сложной задачей, требующей обработки множества событий и управления состоянием. Однако с Vue.js эта задача значительно упрощается. Реактивная природа Vue позволяет легко отслеживать изменения, управлять классами и состоянием элементов в реальном времени, делая процесс создания таких компонентов, как динамические Drop-зоны, более структурированным и предсказуемым.

Ниже представлен рабочий пример компонента. Просто перетаскивайте картинку в «свободные зоны»

<div id="app">
  <div
    v-for="(zone, index) in dropzones"
    :key="index"
    class="dropzone droptarget"
    :class="{ dragover: zone.isDragover }"
    @dragover.prevent
    @dragenter="onDragEnter($event, index)"
    @dragleave="onDragLeave($event, index)"
    @drop="onDrop($event, index)"
  >
    <div
      v-if="index === draggedZoneIndex"
      id="draggable"
      draggable="true"
      :class="{ dragging: isDragging }"        
      @dragstart="onDragStart"
      @dragend="onDragEnd"
    ></div>
  </div>
</div>

#app {
  --s: 150px;
  display: flex;
  gap: 0 20px;
}
#draggable {
  inline-size: 100%;
  block-size: 100%;
  background-image: url("../img/pic.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  cursor: grab;
}
.dropzone {
  inline-size: var(--s);
  block-size: var(--s);
  background-color: #fff;
  border: 3px solid #000;
}
.dragging {
  opacity: 0.5;
}
.dropzone.dragover {
  background-color: #000;
  border: 3px dashed #fff;
}

const {createApp, ref, reactive} = Vue
createApp({
  setup() {
    const isDragging = ref(false)
    const draggedZoneIndex = ref(0)
    const draggedElement = ref(null)
    const dropzones = reactive(Array.from({
      length: 5
    }, () => ({
      isDragover: false
    })))
    const onDragStart = (event) => {
      draggedElement.value = event.target
      isDragging.value = true
      event.target.classList.add("dragging")
    }
    const onDragEnd = (event) => {
      isDragging.value = false
      event.target.classList.remove("dragging")
    }
    const handleDragOver = (event, index, isEntering) => {
      if (event.target.classList.contains("dropzone")) {
        dropzones[index].isDragover = isEntering
      }
    }
    const onDragEnter = (event, index) => handleDragOver(event, index, true)
    const onDragLeave = (event, index) => handleDragOver(event, index, false)

    const onDrop = (event, index) => {
      event.preventDefault()
      const target = event.target
      if (target.classList.contains("dropzone")) {
        dropzones[index].isDragover = false
        draggedZoneIndex.value = index
      }
    }
    return {isDragging,draggedZoneIndex,draggedElement,dropzones,onDragStart,onDragEnd,onDragEnter,onDragLeave,onDrop}
  }
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Разбор кода интерактивного компонента Drag-and-Drop

Компонент состоит из разметки (HTML), стилей (CSS) и логики (JavaScript) на Vue 3 Composition API.

HTML-структура (Template)

Основа — контейнер #app, внутри которого с помощью директивы v-for создаётся несколько зон (dropzone).
Каждая зона слушает события драг-н-дроп: @dragover.prevent, @dragenter, @dragleave, @drop.
Динамические классы (:class) меняют оформление зоны при наведении (dragover) и элемента при перетаскивании (dragging).
Перетаскиваемый элемент (#draggable) рендерится только в активной зоне (привязан к draggedZoneIndex) и имеет атрибут draggable="true".

Стили (CSS)

Используются современные CSS-свойства (inline-size, block-size).
Переменная CSS (--s) задаёт единый размер для зон.
Визуальные эффекты: изменение фона и границы зоны при наведении (dropzone.dragover), полупрозрачность перетаскиваемого элемента (dragging).
Фоновое изображение для draggable-элемента задаётся через background-image.

Логика на Vue (Script)

Состояние: Реактивные переменные (ref) управляют состоянием перетаскивания (isDragging), индексом текущей зоны (draggedZoneIndex) и массивом самих зон (dropzones).

Обработчики событий:

onDragStart / onDragEnd: Помечают начало и конец перетаскивания, добавляя/удаляя CSS-класс.
onDragEnter / onDragLeave: Управляют флагом isDragover для каждой зоны, что меняет её внешний вид. Используется общий метод handleDragOver.
onDrop: Обрабатывает событие сброса элемента. Меняет draggedZoneIndex, что приводит к перемещению draggable-элемента в новую зону благодаря реактивности Vue.

Принцип работы: Vue автоматически реагирует на изменения в draggedZoneIndex и dropzones, перерисовывая только необходимые части DOM. Это избавляет разработчика от ручного манипулирования элементами.

Нужен уникальный и функциональный интерфейс для вашего проекта?

Наша веб-студия специализируется на создании креативных, производительных и пользовательских веб-решений. Мы готовы воплотить в жизнь любую идею — от сложных drag-and-drop интерфейсов и анимированных виджетов до полноценных веб-приложений. Обращайтесь, и мы разработаем компонент или целый проект, который точно будет соответствовать вашим задачам и удивит ваших пользователей!

Предыдущий Следующий