<header>
  <h2 class="title">dragend (HTML Event)</h2>
  <p class="description">Спрацьовує після завершення перетягування елемента користувачем.</p>
</header>
<main>
  <div class="result">
    <div id="draggableContainer">
      <div class="draggable-item" draggable="true" id="item1">Елемент 1</div>
      <div class="draggable-item" draggable="true" id="item2">Елемент 2</div>
      <div class="draggable-item" draggable="true" id="item3">Елемент 3</div>
    </div>
    <div id="dropZone" class="drop-zone">Перетягніть сюди</div>
    <p id="counter">Кількість успішних скидань: 0</p>
    <button id="resetButton">Очистити</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  text-align: center;
}

.draggable-item {
  width: 100px;
  padding: 10px;
  margin: 10px;
  background-color: #007bff;
  color: white;
  text-align: center;
  cursor: move;
  display: inline-block;
  border-radius: 5px;
}

.drop-zone {
  height: 150px;
  margin: 20px auto;
  border: 2px dashed #999;
  background-color: #f8f8f8;
  text-align: center;
  color: #999;
}

.drop-zone.over {
  background-color: #d1ffd1;
  border-color: #00b300;
}

button {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #e74c3c;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #c0392b;
}

document.addEventListener('DOMContentLoaded', function() {
  const draggableItems = document.querySelectorAll('.draggable-item');
  const dropZone = document.getElementById('dropZone');
  const counterElement = document.getElementById('counter');
  const resetButton = document.getElementById('resetButton');
  let dropCount = 0;

  draggableItems.forEach(item => {
    item.addEventListener('dragstart', function(event) {
      event.dataTransfer.setData('text/plain', event.target.id);
      item.style.opacity = '0.5'; // Зменшуємо прозорість під час перетягування
    });

    item.addEventListener('dragend', function(event) {
      item.style.opacity = '1'; // Відновлюємо прозорість після завершення перетягування
      console.log('Перетягування завершено.');
    });
  });

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

  dropZone.addEventListener('dragleave', function(event) {
    dropZone.classList.remove('over');
  });

  dropZone.addEventListener('drop', function(event) {
    event.preventDefault();
    const itemId = event.dataTransfer.getData('text/plain');
    const draggableElement = document.getElementById(itemId);
    dropZone.appendChild(draggableElement);
    dropZone.classList.remove('over');
    dropCount++;
    counterElement.textContent = `Кількість успішних скидань: ${dropCount}`;
  });

  resetButton.addEventListener('click', function() {
    const draggableContainer = document.getElementById('draggableContainer');
    draggableItems.forEach(item => {
      draggableContainer.appendChild(item);
    });
    dropCount = 0;
    counterElement.textContent = 'Кількість успішних скидань: 0';
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.