jQuery - Moving elements up and down

by Krzysztof Niecikowski

HTML

<div id="container"> 
<div class="box" data-id='1' id='box1'>
		Box 1
		<div class="up"><input type="button" value="Up" class="up-button"/>
		</div>
		<div class="down"><input type="button" value="down" class="down-button"/>
		</div>
</div>
<div class="box" data-id='2'  id='box2'>
		Box 2
		<div class="up"><input type="button" value="Up" class="up-button"/>
		</div>
		<div class="down"><input type="button" value="down" class="down-button"/>
		</div>
</div>
<div class="box" data-id='3'  id='box3'>
		Box 3
		<div class="up"><input type="button" value="Up" class="up-button"/>
		</div>
		<div class="down"><input type="button" value="down" class="down-button"/>
		</div>
</div>

</div>

CSS

.box {
border:1px solid #333; 
    margin-bottom:10px;
    background-color:#eee
}

JavaScript

$(".up").click(function () {
    var parent = $(this).parents(".box");
    var box_id = parent.attr('data-id'); 
		var box_index = $('[id^=box]').index( parent ) +1;
    var box_first = $('[id^=box]:first').index() +1;
    var box_prev = parent.prev().index() +1;
    if (box_index == box_first) {
    	console.log('Do Nothing');
    } else {
    	console.log(box_index);
    	console.log(box_first); 
    	console.log(box_prev); 
    	parent.insertBefore(parent.prev()); 
   	}
});




$(".down").click(function () {
    var parent = $(this).parents(".box");
    var box_id = parent.attr('data-id'); 
		var box_index = $('[id^=box]').index( parent ) + 1;
    var box_last = $('[id^=box]:last').index() +1;
    var box_next = parent.next().index() +1;
    if (box_index == box_last) {
    	console.log('Do Nothing');
    } else {
    	console.log(box_index);
    	console.log(box_last); 
    	console.log(box_next); 
    	parent.insertAfter(parent.next());  
   	}
});