Как сделать drag and drop javascript

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Для добавления функциональности перетаскивания элементов на веб-странице с помощью JavaScript, вы можете использовать события dragstart, dragover, drop и dragend:

HTML разметка:

<div id="dragElement" draggable="true">Перетащите меня</div>
<div id="dropZone">Сюда перетащите элемент</div>

CSS стили (необязательно для работы drag and drop):

#dragElement {
  width: 100px;
  height: 50px;
  background-color: #f2f2f2;
  text-align: center;
  line-height: 50px;
  cursor: move;
}
#dropZone {
  width: 200px;
  height: 100px;
  border: 2px dashed #ccc;
  text-align: center;
  line-height: 100px;
}

JavaScript код:

const dragElement = document.getElementById('dragElement');
  const dropZone = document.getElementById('dropZone');

  dragElement.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text/plain', 'Dragged element');
  });

  dropZone.addEventListener('dragover', function(event) {
    event.preventDefault();
  });

  dropZone.addEventListener('drop', function(event) {
    event.preventDefault();
    const data = event.dataTransfer.getData('text/plain');
    event.target.textContent = data;
  });

  dragElement.addEventListener('dragend', function(event) {
    event.target.textContent = 'Перетащите меня';
  });

С помощью этого кода вы сможете перетащить элемент с id="dragElement" в область с id="dropZone".

год назад

Ivan Gagarinov

1 месяц

Основы JavaScript

Синтаксис, основы программирования, переменные, строки, арифметика, условные конструкции, циклы, функции, модули

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

2 месяца

ООП на Javascript

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

1 месяц

СИКП на JS

Навык понимать программы на фундаментальном уровне, уверенно проходить собеседования и решать сложные задачи

2 месяца

React

Навык разрабатывать быстрые и удобные интерфейсы, открывающий доступ к интересным вакансиям в крупных компаниях

Похожие вопросы