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

实现在同一个div内的拖放

发布时间：2018-04-20 11:43:05

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