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

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

1. HTML разметка:

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

2. 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;
   }
   

3. 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". Попробуйте перетащить элемент и он появится в зоне dropZone.

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