JQuery实现元素的点击移动

最新推荐文章于 2022-08-18 14:10:17 发布

jarisMA

最新推荐文章于 2022-08-18 14:10:17 发布

阅读量775

点赞数 1

分类专栏： jquery

本文链接：https://blog.csdn.net/jarisMA/article/details/100106100

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JQuery实现元素的点击移动

发布时间：2018-04-20 13:58:50

HTML

<div id="preview">
	<div>
		<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 class="glyphicon glyphicon-arrow-up"></span>
			<span class="glyphicon glyphicon-arrow-down"></span>
		</span>
	</div>
	<div>
		<p>用章名称</p>
		<span style="color:red;position:relative;top: -22px;">*</span>
		<span class="control_commit">请输入用章名称
			<span class="glyphicon glyphicon-arrow-up"></span>
			<span class="glyphicon glyphicon-arrow-down"></span>
		</span>
	</div>
	<div>
		<p>用章事由</p>
		<span style="color:red;position:relative;top: -22px;">*</span>
		<span class="control_commit">请输入用章事由
			<span class="glyphicon glyphicon-arrow-up"></span>
			<span class="glyphicon glyphicon-arrow-down"></span>
		</span>
	</div>
	<div>
		<p>附件</p>
		<span style="color:red;position:relative;top: -22px;">*</span>
		<div class="control_commit">
			<img src=".../attachment.png" width="26px" height="26px" />
			<span class="glyphicon glyphicon-arrow-up"></span>
			<span class="glyphicon glyphicon-arrow-down"></span>
		</div>
	</div>
	<div>
		<p>发送单位</p>
		<span class="tip" style="color:red;position:relative;top: -22px;">*</span>
		<span class="control_commit">请选择发送单位
			<span class="glyphicon glyphicon-arrow-up"></span>
			<span class="glyphicon glyphicon-arrow-down"></span>
		</span>
	</div>
</div>

JS

//找到本元素的上一个兄弟元素，然后insertBefore插到兄弟元素前面
$('body').on('click', '.glyphicon-arrow-up', function() {
	$(this).parents('.control_model').insertBefore($(this).parents('.control_model').prev());
});
//找到本元素的下一个兄弟元素，然后insertAfter插到兄弟元素后面
$('body').on('click', '.glyphicon-arrow-down', function() {
	$(this).parents('.control_model').insertAfter($(this).parents('.control_model').next());
});