HTML | 拖放

拖放（Drag and Drop）是一种常见的Web开发技术，可使用户通过鼠标操作在网页上拖动元素，并将其放置到指定位置。在HTML中，拖放功能由一组事件和属性来实现，开发人员可以使用这些特性来创建交互性更强的Web应用程序。

基本拖放元素

可拖动元素

要创建可拖动元素，需要使用 draggable 属性，将其设置为 true。例如：

<div draggable="true">拖动我吧！</div>

接收拖放的区域

为了使某个区域能够接收拖放的元素，需要设置相应的事件监听器，以及定义对应的处理逻辑：

<div id="dropzone">将元素拖放到这里</div>

<script>
  var dropzone = document.getElementById('dropzone');

  dropzone.addEventListener('dragover', function(event) {
    // 阻止浏览器的默认行为，使其可接收拖放元素
    event.preventDefault();
  });

  dropzone.addEventListener('drop', function(event) {
    // 阻止浏览器的默认行为，如打开拖放文件时的新页面。
    event.preventDefault();

    // 获取拖放的元素
    var data = event.dataTransfer.getData('text');
    
    // 添加处理逻辑
    dropzone.innerHTML = '拖放元素: ' + data;
  });
</script>

拖放事件

dragstart

dragstart 事件在拖动操作开始时被触发，通常用于设置被拖动元素的副本和传递数据：

<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', '拖放数据')">拖动我吧！</div>

dragover

dragover 事件在拖动元素悬停在接收区域上方时触发，可用于控制区域的样式或其他特效：

<div id="dropzone" ondragover="event.preventDefault(); this.style.background = 'yellow'">将元素拖放到这里</div>

drop

drop 事件在拖放元素被放置在接收区域时触发，可用于处理拖放完成后的逻辑：

<div id="dropzone" ondrop="event.preventDefault(); this.innerHTML = '拖放元素: ' + event.dataTransfer.getData('text')">将元素拖放到这里</div>

进阶拖放功能

拖放功能还可以结合其他技术和API，实现更多复杂的交互效果，如拖放文件、排序列表、跨窗口传递数据等。以下是一些进阶拖放功能的相关文章和资源：

• HTML Drag and Drop API
• MDN - 使用拖放 API
• HTML5 拖放功能示例
• jQuery UI - 可拖放插件