HTML5原生拖放行重排异常：父容器不可拖放仅子元素可接收拖放

你遇到的这个问题，核心在于HTML5拖放的默认行为规则：要让一个元素成为有效的放置目标，必须在它的dragover事件处理函数中调用event.preventDefault()，否则浏览器会默认拒绝任何放置操作在该元素上。

而你的子元素<input>之所以能接收拖放，是因为浏览器对表单输入元素有默认的拖放支持（比如允许拖放文本到输入框里），它的dragover事件默认不会阻止放置行为。但父级的行<div>没有处理dragover事件并阻止默认行为，所以当你拖拽到<div>的空白区域时，浏览器会直接拒绝放置，只有当拖拽到子<input>上时，才能触发放置逻辑。

要让父行<div>成为有效的放置目标，你需要做以下几步：

1. 给所有行<div>添加dragover事件监听，在事件处理函数中调用event.preventDefault()，明确告诉浏览器这个元素允许接收拖放。
2. （可选但推荐）添加dragenter事件监听，同样调用event.preventDefault()，避免某些浏览器的默认样式或行为干扰。
3. 确保拖放事件能正确冒泡，或者如果子元素有自己的拖放事件处理，也要让事件继续传递到父元素。

下面是一个完整的示例代码，实现行重排功能：

<!DOCTYPE html>
<html>
<head>
    <style>
        .row {
            padding: 8px;
            margin: 4px 0;
            border: 1px solid #ccc;
            cursor: grab;
        }
        .row:active {
            cursor: grabbing;
        }
        .row.drag-over {
            border-color: #2196F3;
            background-color: #e3f2fd;
        }
    </style>
</head>
<body>
    <div class="row" draggable="true">
        <input type="text" value="行1" />
    </div>
    <div class="row" draggable="true">
        <input type="text" value="行2" />
    </div>
    <div class="row" draggable="true">
        <input type="text" value="行3" />
    </div>

    <script>
        let draggedRow = null;

        // 初始化所有行的拖放事件
        document.querySelectorAll('.row').forEach(row => {
            // 拖拽开始
            row.addEventListener('dragstart', (e) => {
                draggedRow = row;
                e.dataTransfer.setData('text/plain', row.textContent);
                row.style.opacity = '0.5';
            });

            // 拖拽结束
            row.addEventListener('dragend', (e) => {
                draggedRow.style.opacity = '1';
                draggedRow = null;
                // 移除所有拖拽提示样式
                document.querySelectorAll('.row').forEach(r => r.classList.remove('drag-over'));
            });

            // 拖拽进入目标元素
            row.addEventListener('dragenter', (e) => {
                if (e.target.classList.contains('row') && draggedRow !== row) {
                    e.preventDefault();
                    row.classList.add('drag-over');
                }
            });

            // 拖拽离开目标元素
            row.addEventListener('dragleave', (e) => {
                if (e.target.classList.contains('row')) {
                    row.classList.remove('drag-over');
                }
            });

            // 拖拽悬停在目标元素上（关键：必须阻止默认行为）
            row.addEventListener('dragover', (e) => {
                e.preventDefault(); // 这一步是让元素成为有效放置目标的核心
            });

            // 放置操作
            row.addEventListener('drop', (e) => {
                e.preventDefault();
                if (draggedRow && draggedRow !== row) {
                    // 获取父容器，将拖拽行插入到目标行的前面
                    const parent = row.parentNode;
                    parent.insertBefore(draggedRow, row);
                }
            });
        });
    </script>
</body>
</html>

• dragover事件的preventDefault()：这是让父<div>成为有效放置目标的核心，没有这一步，浏览器会默认拒绝任何放置到该元素上的操作。
• 子元素的事件处理：如果你的子<input>需要保留自身的拖放功能（比如允许拖放文本），不需要阻止事件冒泡，让事件自然传递到父div即可，这样父div和子input都能响应拖放操作。
• 拖拽状态样式：添加drag-over类可以给用户直观的拖拽反馈，提升交互体验。

内容的提问来源于stack exchange，提问作者wst