PHP 7.4 不处理拖拽交互，完全由 JavaScript 基于 HTML5 Drag & Drop API 实现 ID 传递，PHP 仅通过 AJAX 接收并处理前端提交的 ID 数据。
PHP 7.4 本身是服务端语言，不直接处理拖拽（drag & drop）这类前端交互。拖拽文字到另一个 <div> 并传递 ID，**完全依赖 JavaScript（前端）实现**，PHP 只在需要持久化或后端处理时参与（比如通过 AJAX 提交 ID）。
1. 前端：用 HTML5 Drag & Drop API 传 ID
核心思路：把要拖拽的文字（或其容器）的 data-id 属性作为“载荷”，在 dragstart 中设置，在 drop 时读取。
- 给可拖拽元素添加
draggable="true"和data-id="123" - 监听
dragstart，用event.dataTransfer.setData()存 ID（推荐用"text/plain"类型） - 目标
<div>需阻止默认行为（dragover+preventDefault），否则无法触发drop - 在
drop事件中用getData("text/plain")取出 ID
示例代码：
<!-- 可拖拽项 -->
<div draggable="true" data-id="456" class="item">标题文字</div>
<p><!-- 目标区域 -->
<div id="target" style="min-height:100px;border:1px dashed #999;">拖到这里</div></p><p><script>
document.querySelector('.item').addEventListener('dragstart', function(e) {
const id = this.dataset.id;
e.dataTransfer.setData('text/plain', id); // 传递 ID 字符串
});</p><p>document.getElementById('target').addEventListener('dragover', function(e) {
e.preventDefault(); // 必须！否则 drop 不触发
});</p><p>document.getElementById('target').addEventListener('drop', function(e) {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
console.log('拖入的 ID 是：', id); // → "456"
// 此处可发 AJAX 给 PHP 后端，或更新页面 DOM
});
</script>2. 如果拖的是纯文字（非结构化内容）
浏览器默认会把选中文本作为拖拽内容，此时无法直接获取原始元素的 data-id。解决方法：
立即学习“PHP免费学习笔记（深入）”；
- 不拖纯文字，改为拖包裹文字的
<span>或<div>元素（如上例） - 若必须拖文本，可在
dragstart中额外存一个隐藏标识（如data-transfer-id），但可靠性低，不推荐 - 更稳妥的做法：用
contenteditable或富文本编辑器控制内容粒度
3. 后端接收（PHP 7.4 示例）
前端拿到 ID 后，用 fetch 或 AJAX 发送到 PHP 脚本：
// 前端 JS（接上例 drop 后）
fetch('save_drop.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ target_id: id, dropped_id: id })
});PHP 接收（save_drop.php）：
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$input = json_decode(file_get_contents('php://input'), true);
$dropped_id = (int)$input['dropped_id']; // 安全过滤
// 执行数据库更新、日志记录等...
echo json_encode(['success' => true, 'id' => $dropped_id]);
}
?>4. 注意事项
- 拖拽事件不跨浏览器窗口/标签页（除非同源且特殊配置）
- 移动端对原生 drag & drop 支持有限，需用第三方库（如
interact.js）增强兼容性 - PHP 不参与拖拽过程，只负责接收和处理前端提交的数据
- ID 传输全程是字符串，PHP 端务必做类型转换和合法性校验（防注入、越权）
简而言之：ID 由前端拖拽事件携带，通过 JS 获取并发送，PHP 只管收和处理——分工明确，各司其职。
