Javascript HTML使用HTML Dragable拖动文本时，元素有时会被放置在错误的元素中

我正在尝试使用html5的拖放功能编写一个html页面。我有一个表格，我想在其中拖放各种文本元素。每个表单元格中可能有多个元素。然后我想解析这个表，输出每个元素的表行。我发现，如果我将一个元素拖到一个表单元格中，有时该元素会插入该单元格中的一个元素中，但会作为表中的一个条目插入

因此，我的表的原始html是

<thead>
        <tr>
            <td>id</td>
            <td>planet</td>
        </tr>
        </thead>
        <tbody>
                <tr>
                        <td>01</td>
                        <td ondrop="drop(event)" ondragover="allowDrop(event)">
                            <p draggable="true" ondragstart="drag(event)" id="sun">sun</p>
                        </td>
                </tr>
                <tr>
                        <td>02</td>
                        <td ondrop="drop(event)" ondragover="allowDrop(event)">
                            <p draggable="true" ondragstart="drag(event)" id="mercury">mercury</p>
                        </td>
                </tr>
                <tr>
                        <td>03</td>
                        <td ondrop="drop(event)" ondragover="allowDrop(event)">
                            <p draggable="true" ondragstart="drag(event)" id="mars">mars</p>
                        </td>
                </tr>
                <tr>
                        <td>04</td>
                        <td ondrop="drop(event)" ondragover="allowDrop(event)">
                            <p draggable="true" ondragstart="drag(event)" id="earth">earth</p>
                            <p draggable="true" ondragstart="drag(event)" id="moon">moon</p>
                        </td>
                </tr>
        </tbody>
</table>

如果我将项目拖到彼此的顶部，输出结果如下所示

1 - sun<p draggable="true" ondragstart="drag(event)" id="moon">moon</p>
1 - moon
2 - mercury
3 - mars
4 - earth

1-sun
moon
1月
2-汞
3-火星
4-地球

桌子看起来像这样

<tbody>
        <tr>
                <td>01</td>
                <td ondrop="drop(event)" ondragover="allowDrop(event)">
                    <p draggable="true" ondragstart="drag(event)" id="sun">sun<p draggable="true" ondragstart="drag(event)" id="moon">moon</p></p>
                </td>   
        </tr>
        <tr>
                <td>02</td>
                <td ondrop="drop(event)" ondragover="allowDrop(event)">
                    <p draggable="true" ondragstart="drag(event)" id="mercury">mercury</p>
                </td>   
        </tr>
        <tr>
                <td>03</td>
                <td ondrop="drop(event)" ondragover="allowDrop(event)">
                    <p draggable="true" ondragstart="drag(event)" id="mars">mars</p>
                </td>   
        </tr>
        <tr>
                <td>04</td>
                <td ondrop="drop(event)" ondragover="allowDrop(event)">
                    <p draggable="true" ondragstart="drag(event)" id="earth">earth</p>

                </td>   
        </tr>
    </tbody>

01
太阳

02
水星

03
火星

04
地球

---

因此，拖放操作将html放到sun段落中。有人知道我怎样才能阻止这一切发生吗？我已经尝试将ondragover=“return false；”和ondrop=“return false；”添加到p元素中，但没有成功。

您正在将html输出（文本）添加到元素中，这就是您看到所看到内容的原因。感谢快速响应，我尝试将拖动类型更改为text/html，但仍然得到相同的结果。这就是你的意思吗？我可以将它们分开，如果我小心地拖动它们，它们就不会合并。有没有办法使p元素不可拖放。我找到了一个解决方案。我更改了我的drop函数，如下所示：

函数drop（ev）{

`if（ev.target.getAttribute（'data-draggable'）=='target'）``{''var data=ev.dataTransfer.getData（“text/html”）；''ev.target.appendChild（document.getElementById（data））；'ev.preventDefault（）；'}'}'并在单元格定义中添加了一个data draggable=“true”您正在将html输出（文本）附加到元素中，这就是为什么您看到了所看到的内容。感谢快速响应，我尝试将拖动类型更改为text/html，但仍然得到了相同的结果。这就是你的意思吗？我可以将它们分开，如果我小心地拖动它们，它们就不会合并。有没有办法使p元素不可拖放。我找到了一个解决方案。我更改了我的drop函数，如下所示：

函数drop（ev）{

`if（ev.target.getAttribute（'data-draggable'）=='target'）``{''var data=ev.dataTransfer.getData（“text/html”）；''ev.target.appendChild（document.getElementById（data））；'ev.preventDefault（）；'}''}'并将数据draggable=“true”添加到单元格定义''

1 - sun<p draggable="true" ondragstart="drag(event)" id="moon">moon</p>
1 - moon
2 - mercury
3 - mars
4 - earth

<tbody>
        <tr>
                <td>01</td>
                <td ondrop="drop(event)" ondragover="allowDrop(event)">
                    <p draggable="true" ondragstart="drag(event)" id="sun">sun<p draggable="true" ondragstart="drag(event)" id="moon">moon</p></p>
                </td>   
        </tr>
        <tr>
                <td>02</td>
                <td ondrop="drop(event)" ondragover="allowDrop(event)">
                    <p draggable="true" ondragstart="drag(event)" id="mercury">mercury</p>
                </td>   
        </tr>
        <tr>
                <td>03</td>
                <td ondrop="drop(event)" ondragover="allowDrop(event)">
                    <p draggable="true" ondragstart="drag(event)" id="mars">mars</p>
                </td>   
        </tr>
        <tr>
                <td>04</td>
                <td ondrop="drop(event)" ondragover="allowDrop(event)">
                    <p draggable="true" ondragstart="drag(event)" id="earth">earth</p>

                </td>   
        </tr>
    </tbody>