HTML5的原力拯救世界

2023-09-23 23:37:05

在前端世界中，HTML5的原生拖放事件可谓神来之笔，轻描淡写间赋予元素游走自如的特性，更令人惊叹的是，代码量竟能少到让人难以置信。得益于它的存在，我们不必再煞费苦心编写复杂冗长的代码来完成拖拽功能。

它极其轻量，但魅力绝不逊于庞然大物，只要掌握了这门独门绝技，你就能让元素在容器中恣意飞舞，举手投足间，元素就能被收入囊中。更有甚者，若要给移入容器的元素披上新的外衣，它也不负众望，信手拈来。

让我们来见识一下它的绝妙之处。我们的目标是让元素在容器中任意拖动，并能在移入容器时变换样式。我们先看看HTML部分，它是舞台，元素们将在其中翩翩起舞。

<div class="container">
  <div class="item">元素</div>
</div>

现在，我们把目光投向CSS部分，它是戏服，将为元素们披上华美的外衣。

.container {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  padding: 20px;
}

.item {
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;
  text-align: center;
  line-height: 100px;
  cursor: grab;
}

.item:hover {
  background-color: green;
}

.item.dragged {
  background-color: red;
}

最后，让我们编写JavaScript代码，它是导演，指挥元素们演绎精彩的舞蹈。

const container = document.querySelector('.container');
const item = document.querySelector('.item');

item.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', '元素');
  item.classList.add('dragged');
});

container.addEventListener('dragover', (e) => {
  e.preventDefault();
});

container.addEventListener('drop', (e) => {
  e.preventDefault();
  item.classList.remove('dragged');
});