HTML5 提供了拖放 API，使开发者能够实现在网页中拖拽和放置元素的交互。通过拖放 API，你可以实现元素的拖动、释放和在拖放过程中的其他事件处理。以下是一个简单的 HTML5 拖放的示例：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 Drag and Drop Example</title>
  <style>
    #dragElement {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      color: #fff;
      text-align: center;
      line-height: 100px;
      cursor: move;
    }

    #dropTarget {
      width: 300px;
      height: 200px;
      border: 2px dashed #ccc;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>HTML5 Drag and Drop Example</h1>

  <div id="dragElement" draggable="true" ondragstart="dragStart(event)">Drag me!</div>
  <div id="dropTarget" ondragover="allowDrop(event)" ondrop="drop(event)">Drop here!</div>

  <script>
    function dragStart(event) {
      // 设置被拖动元素的数据
      event.dataTransfer.setData("text/plain", event.target.id);
    }

    function allowDrop(event) {
      // 阻止默认行为以允许放置
      event.preventDefault();
    }

    function drop(event) {
      // 阻止默认行为（如打开链接）
      event.preventDefault();

      // 获取被拖动元素的数据
      var data = event.dataTransfer.getData("text/plain");

      // 在放置目标中创建被拖动元素的副本
      var draggedElement = document.getElementById(data);
      var droppedElement = draggedElement.cloneNode(true);

      // 将副本添加到放置目标中
      event.target.appendChild(droppedElement);
    }
  </script>
</body>
</html>

在这个示例中：

  •  draggable="true" 属性用于标记元素是可拖动的。

  •  ondragstart 事件处理函数在拖动开始时触发，设置被拖动元素的数据。

  •  ondragover 事件处理函数在拖动元素悬停在目标上时触发，阻止默认行为以允许放置。

  •  ondrop 事件处理函数在元素被放置时触发，获取被拖动元素的数据，并在放置目标中创建副本。


这是一个简单的例子，你可以根据实际需求添加更多的交互和样式。拖放 API 提供了更多的事件和方法，允许你更精细地控制拖放行为。


转载请注明出处：http://www.zyzy.cn/article/detail/3671/HTML5