JavaScript 教程
收录了这篇文章 

JavaScript 的原生拖放功能允许用户通过鼠标（或触摸屏设备上的手势）直接在网页上移动元素。这一功能主要依赖于几个HTML属性和JavaScript事件来实现。下面是一个简单的示例和关键概念的解释，展示如何在网页上实现基本的拖放功能。

HTML 设置

首先，你需要设置两个HTML元素：一个是可拖动的元素，另一个是拖放目标区域。

<!-- 可拖动的元素 -->
<div id="draggable" draggable="true">
  拖动我！
</div>

<!-- 目标放置区域 -->
<div id="dropzone">
  放置区域
</div>

• draggable="true" 属性使元素可被拖动。
• 你需要为可拖动元素和目标放置区域指定唯一的ID，以便在JavaScript中引用它们。

JavaScript 事件处理

接下来，使用JavaScript为这些元素添加事件监听器以处理拖放行为。

// 获取元素
var dragElement = document.getElementById('draggable');
var dropZone = document.getElementById('dropzone');

// 当开始拖动时
dragElement.addEventListener('dragstart', function(event) {
  // 防止图片文本等默认行为
  event.dataTransfer.setData('text/plain', ''); 
});

// 当拖动元素进入放置区域
dropZone.addEventListener('dragover', function(event) {
  // 阻止浏览器的默认处理方式（默认情况下不允许放下）
  event.preventDefault();
});

// 当拖动元素在放置区域内时
dropZone.addEventListener('dragenter', function(event) {
  // 可选：改变放置区域样式，指示可以放下
  this.style.backgroundColor = 'lightgreen';
});

// 当拖动元素离开放置区域
dropZone.addEventListener('dragleave', function(event) {
  // 可选：恢复放置区域样式
  this.style.backgroundColor = '';
});

// 当拖动元素在放置区域内释放
dropZone.addEventListener('drop', function(event) {
  // 阻止默认处理
  event.preventDefault();
  
  // 可选：执行放置后的操作，比如移动元素到目标位置
  this.appendChild(dragElement);
  this.style.backgroundColor = '';
});

关键概念解释

• dragstart：当开始拖动一个可拖动元素时触发。
• dragover：当拖动元素在另一个元素上悬停时重复触发。需要调用event.preventDefault()来允许在此元素上放置。
• dragenter：当拖动元素进入另一元素的边界时触发。
• dragleave：当拖动元素离开另一元素的边界时触发。
• drop：当在元素上释放被拖动的元素时触发。同样需要调用event.preventDefault()。

通过上述代码和概念，你可以实现一个基础的拖放功能。根据具体需求，还可以进一步定制拖放过程中的视觉反馈、数据传输或其他复杂交互。