使用 Jquery 限制 div 的上下移动答案

【问题标题】：Limit the up down movement of divs with Jquery使用 Jquery 限制 div 的上下移动
【发布时间】：2015-12-22 19:30:15
【问题描述】：

我制作了一份待完成任务的“待办事项清单”。我有一些按钮可以在列表中上下移动任务。

我去向上和向下按钮去。我唯一的问题是任务 div 能够在整个页面上下移动。如何让任务 div 只能上下移动？

谢谢！

这是我的代码：

$(document).ready(function(){
	
	$('.up_button').click(function(){
		$(this).parents('.task').insertBefore($(this).parents('.task').prev());
	});

	$('.down_button').click(function(){
		$(this).parents('.task').insertAfter($(this).parents('.task').next());
	});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="task col-sm-12">
	<div class="col-md-6">
		 <div class="input-group">
			<span class="input-group-addon"><input type="checkbox" name="task1" value="taskID1" /></span> <input type="text" class="form-control" value="Write HTML" readonly>
		</div>
	</div>
	<div class="col-md-6">
		<button type="button" class="btn btn-default up_button"><span class="glyphicon glyphicon-arrow-up"></span> Move Up</button>
		<button type="button" class="btn btn-default down_button"><span class="glyphicon glyphicon-arrow-down"></span> Move Down</button>
	</div>
</div>

<div class="task col-sm-12">
	<div class="col-md-6">
		 <div class="input-group">
			<span class="input-group-addon"><input type="checkbox" name="task1" value="taskID1" /></span> <input type="text" class="form-control" value="Write XML" readonly>
		</div>
	</div>
	<div class="col-md-6">
		<button type="button" class="btn btn-default up_button"><span class="glyphicon glyphicon-arrow-up"></span> Move Up</button>
		<button type="button" class="btn btn-default down_button"><span class="glyphicon glyphicon-arrow-down"></span> Move Down</button>
	</div>
</div>

【问题讨论】：

标签： javascript php jquery html divider

【解决方案1】：

第一个：我认为您需要在 insertAfter 或 insertBefore 之前定义 $(this)

第二个：你可以使用.closest()

$(document).ready(function(){

    $('.up_button').click(function(){
        var ThisIt = $(this);
        $(this).closest('.task').insertBefore(ThisIt.closest('.task').prev('.task'));
    });

    $('.down_button').click(function(){
        var ThisIt = $(this);
        ThisIt.closest('.task').insertAfter(ThisIt.closest('.task').next('.task'));
    });

});

Demo Here

【讨论】：