拖拽文字到另一个div必须用javascript实现，php作为服务端语言无法直接处理；需使用html5 drag and drop api，设置draggable属性并监听dragstart、dragover、drop事件，php仅可在拖拽后接收数据持久化。
拖拽文字到另一个div在PHP里根本做不到
PHP是服务端语言，不处理页面上的鼠标拖拽行为。你看到的拖拽操作（按住文字、移动、松开到目标区域）全程发生在浏览器里，必须用JavaScript实现。PHP最多能在拖拽完成后接收一次提交的数据，比如记录“用户把‘张三’拖到了‘待审核’栏”，但绝不可能直接操控DOM节点移动。
真正起作用的是HTML5 Drag and Drop API
浏览器原生支持拖拽，靠的是draggable属性 + 一系列dragstart/dragover/drop事件。关键点不是“拖文字”，而是“拖一个元素”，所以得把文字包进<span></span>或<div>，再设<code>draggable="true"。
常见错误现象：
- 拖不动：没加
draggable="true"，或没阻止dragover默认行为（浏览器默认禁止放置） - 松手后没反应：没监听
drop事件，或没调用event.preventDefault()在dragover里 - 文字被复制而非移动：
dragstart里没用dataTransfer.setData()传标识，或drop里没用remove()删源节点
最小可行示例：
<div id="source">
<div draggable="true" data-id="item-1">姓名：张三</div>
<div draggable="true" data-id="item-2">姓名：李四</div>
</div>
<div id="target" style="min-height: 100px; border: 1px dashed #999;">
拖到这里
</div>
<script>
document.querySelectorAll('[draggable]').forEach(el => {
el.addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', e.target.dataset.id);
});
});
document.getElementById('target').addEventListener('dragover', e => {
e.preventDefault(); // 必须！否则drop不会触发
});
document.getElementById('target').addEventListener('drop', e => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
const el = document.querySelector(`[data-id="${id}"]`);
if (el) e.currentTarget.appendChild(el); // 移动节点
});
</script>
如果非要PHP参与，只在drop后发请求
DOM迁移纯前端完成，PHP只负责持久化结果。比如用户拖完，前端用fetch把新顺序发给PHP接口：
// 前端 drop 后触发
fetch('/save-order.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
target: 'approved',
items: ['item-1', 'item-2']
})
});
save-order.php里收数据、校验、写数据库即可。别试图让PHP去getElementById或appendChild——它根本没DOM。
移动端和Safari兼容性要特别小心
iOS Safari对draggable支持有限，部分版本不触发dragstart；安卓Chrome也偶有事件丢失。更稳妥的做法是放弃原生Drag API，改用mousedown/mousemove模拟（如使用interact.js），或直接上SortableJS这类成熟库。它们内部已处理了设备差异、触摸事件映射、辅助功能支持等细节。
容易被忽略的一点：拖拽操作本身不产生表单提交，也不刷新页面，所有状态变更都停留在当前DOM树中。如果用户F5刷新，刚才拖好的布局就没了——除非你提前存到localStorage或后端。
