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

Аватар пользователя Ivan Gagarinov
Ivan Gagarinov
20 мая 2024

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

  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".

1 0
Познакомьтесь с основами JavaScript бесплатно