HTML 5 拖放 实现在同一个div内的拖放

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/JaRiS_jade/article/details/80016226

实现在同一个div内的拖放

JS

//允许放置的方法：默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
function allowDrop(ev) {
   ev.preventDefault();
}

//拖动方法，获取被拖元素：数据类型是 "Text"，值是可拖动元素的 id 。
function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

//放置方法：把被拖元素追加到放置元素（目标元素）中
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

HTML

<!--ondrop:进行放置;ondragover:放到何处;-->
<div id="preview" ondrop="drop(event)" ondragover="allowDrop(event)">
    <!--draggable:是否可拖动；ondragstart:元素被拖动;-->
    <div id="drag1" draggable="true" ondragstart="drag(event)" data-style="border: 1px solid rgb(51, 68, 85);">
        <div style="top: 0px;">
            <span class="glyphicon glyphicon-remove"></span>
        </div>
        <p>用章类别</p>
        <span style="color:red;position:relative;top: -22px;">*</span>
        <span>请选择用章类别
            <span class="glyphicon glyphicon-menu-right" style="height:40px;line-height:40px"></span>
        </span>
    </div>
    <div id="drag2" draggable="true" ondragstart="drag(event)" data-index="2">
        <p>用章名称</p>
        <span style="color:red;position:relative;top: -22px;">*</span>
        <span>请输入用章名称</span>
    </div>
    <div id="drag3" draggable="true" ondragstart="drag(event)" data-index="3">
        <p>用章事由</p>
        <span style="color:red;position:relative;top: -22px;">*</span>
        <span class="control_commit">请输入用章事由</span>
    </div>
    <div id="drag4" draggable="true" ondragstart="drag(event)" data-index="4">
        <p>附件</p>
        <span style="color:red;position:relative;top: -22px;">*</span>
        <div>
            <img src=".../attachment.png" width="26px" height="26px" />
        </div>
    </div>
    <div id="drag5" draggable="true" ondragstart="drag(event)" data-index="5">
        <p>发送单位</p>
        <span class="tip" style="color:red;position:relative;top: -22px;">*</span>
        <span class="control_commit">请选择发送单位</span>
    </div>
</div>

原图：

将用章类别拖动到最后：

问题：

在同一个div中，怎么设置不让元素可拖动放置到另一个元素中？（如：用章类别如果不直接拖动到最后，而是拖动到用章名称下面，就会导致它被拖动到用章名称里面，这不是我想要的效果）