原生 Drag & Drop 拖拽：HTML5 API 实现指南

"原生 Drag & Drop 拖拽：HTML5 API 实现指南"\n\n原生的 drag 拖拽指的是使用原生的 HTML5 的 drag and drop API 来实现拖拽功能。以下是一个简单的示例：\n\nHTML：\n\nhtml\n<div id=\"dragElement\" draggable=\"true\">拖拽元素</div>\n<div id=\"dropZone\">放置区域</div>\n\n\nJavaScript：\n\njavascript\nvar dragElement = document.getElementById(\"dragElement\");\nvar dropZone = document.getElementById(\"dropZone\");\n\ndragElement.addEventListener(\"dragstart\", function(event) {\n // 设置拖拽的数据\n event.dataTransfer.setData(\"text/plain\", event.target.id);\n});\n\ndropZone.addEventListener(\"dragover\", function(event) {\n // 阻止默认的拖拽行为\n event.preventDefault();\n});\n\ndropZone.addEventListener(\"drop\", function(event) {\n // 阻止默认的拖拽行为\n event.preventDefault();\n \n // 获取拖拽的数据\n var data = event.dataTransfer.getData(\"text/plain\");\n \n // 将拖拽的元素添加到放置区域中\n var draggedElement = document.getElementById(data);\n dropZone.appendChild(draggedElement);\n});\n\n\n以上代码中，首先给拖拽元素和放置区域分别添加了 id 属性，然后在拖拽元素上设置了 draggable 属性为 true，表示该元素可拖拽。\n\n接着，通过 addEventListener 方法给拖拽元素添加了 dragstart 事件监听器，在该事件处理函数中，使用 event.dataTransfer.setData 方法设置了拖拽的数据，这里设置了拖拽元素的 id。\n\n然后，在放置区域上添加了 dragover 事件监听器，在该事件处理函数中，使用 event.preventDefault 方法阻止默认的拖拽行为，这样才能允许在该区域中放置拖拽元素。\n\n最后，在放置区域上添加了 drop 事件监听器，在该事件处理函数中，使用 event.preventDefault 方法阻止默认的拖拽行为，然后使用 event.dataTransfer.getData 方法获取拖拽的数据，这里获取了拖拽元素的 id，然后将拖拽的元素添加到放置区域中。\n\n通过以上代码，就可以实现原生的 drag 拖拽功能。\n