在拖动元素时检测悬停/鼠标悬停/鼠标输入

// HTML
<div id="dragElement">拖动我</div>
<div id="dropArea">放置区域</div>

// JavaScript
var dragElement = document.getElementById('dragElement');
var dropArea = document.getElementById('dropArea');

dragElement.addEventListener('dragstart', function(event) {
  // 设置拖动时传递的数据
  event.dataTransfer.setData('text/plain', '拖动的元素');
});

dropArea.addEventListener('dragover', function(event) {
  // 阻止默认的拖放行为
  event.preventDefault();
});

dropArea.addEventListener('dragenter', function(event) {
  // 当鼠标进入放置区域时添加样式或其他效果
  dropArea.classList.add('highlight');
});

dropArea.addEventListener('dragleave', function(event) {
  // 当鼠标离开放置区域时移除样式或其他效果
  dropArea.classList.remove('highlight');
});

dropArea.addEventListener('drop', function(event) {
  // 阻止默认的拖放行为
  event.preventDefault();

  // 获取拖动时传递的数据
  var draggedElement = event.dataTransfer.getData('text/plain');

  // 在放置区域执行相应的操作，如显示拖动的元素
  dropArea.innerHTML = draggedElement;
});