Вы можете попробовать мой (http://jsfiddle.net/606bs750/16/). Неограниченное количество блоков, которые вы можете перетаскивать и сортировать.
Блоки будут ограничены родительским.
<div id="parent" class="parent">
<button id="button1" class="button">Drag me 1</button>
<button id="button2" class="button">Drag me 2</button>
<button id="button3" class="button">Drag me 3</button>
<button id="button4" class="button">Drag me 4</button>
</div>
JQuery (только):
$(function() {
$('.button').mousedown(function(e) {
if(e.which===1) {
var button = $(this);
var button_id = button.attr('id');
var parent_height = button.parent().innerHeight();
var top = parseInt(button.css('top'));
var original_ypos = button.position().top; //original ypos
var drag_min_ypos = 0-original_ypos;
var drag_max_ypos = parent_height-original_ypos-button.outerHeight();
var drag_start_ypos = e.clientY;
var my_ypos = original_ypos;
//Set current order for all
$('.button').each(function(i) { $(this).attr('data-order',(i+1)); });
var prev_button = button.prev('.button'); var next_button = button.next('.button');
var prev_button_ypos = prev_button.length>0 ? prev_button.position().top : '';
var next_button_ypos = next_button.length>0 ? next_button.position().top : '';
$('#log1').text('mousedown '+button_id+' original_ypos: '+original_ypos);
$('#log2').text('');
$('#log3').text('');
$(window).on('mousemove',function(e) {
//Move and constrain
button.addClass('drag');
var direction = my_ypos>button.position().top ? 'up' : 'down';
var new_top = top+(e.clientY-drag_start_ypos);
my_ypos = button.position().top;
button.css({top:new_top+'px'});
if(new_top<drag_min_ypos) { button.css({top:drag_min_ypos+'px'}); }
if(new_top>drag_max_ypos) { button.css({top:drag_max_ypos+'px'}); }
$('#log2').text('mousemove new_top: '+new_top+', my_ypos: '+my_ypos+', direction: '+direction);
//$('#log3').text('');
//Check position over others
if(direction=='down'&&next_button_ypos!='') {
if(my_ypos>next_button_ypos) { //crossed next button
$('#log3').text('dragged after '+next_button_ypos+' ('+next_button.attr('id')+')');
next_button.css({top:(parseInt(next_button.css('top'))-next_button.outerHeight(true))+'px'}); //up once
var tmp_order = next_button.attr('data-order');
next_button.attr('data-order',button.attr('data-order')); //switch order
button.attr('data-order',tmp_order);
prev_button = next_button; next_button = next_button.nextAll('.button:not(.drag)').first();
prev_button_ypos = prev_button.length>0 ? prev_button.position().top : '';
next_button_ypos = next_button.length>0 ? next_button.position().top : '';
}
} else if(direction=='up'&&prev_button_ypos!='') {
if(my_ypos<prev_button_ypos) { //crossed prev button
$('#log3').text('dragged before '+prev_button_ypos+', '+prev_button.attr('id'));
prev_button.css({top:(parseInt(prev_button.css('top'))+prev_button.outerHeight(true))+'px'}); //down once
var tmp_order = prev_button.attr('data-order');
prev_button.attr('data-order',button.attr('data-order')); //switch order
button.attr('data-order',tmp_order);
next_button = prev_button; prev_button = prev_button.prevAll('.button:not(.drag)').first();
prev_button_ypos = prev_button.length>0 ? prev_button.position().top : '';
next_button_ypos = next_button.length>0 ? next_button.position().top : '';
}
}
$('#log4').text('prev_button_ypos: '+prev_button_ypos+' ('+prev_button.attr('id')+'), next_button_ypos: '+next_button_ypos+' ('+next_button.attr('id')+')');
});
$(window).on('mouseup',function(e) {
if(e.which===1) {
$('.button').removeClass('drag');
$(window).off('mouseup mousemove');
//Reorder and reposition all
$('.button').each(function() {
var this_order = parseInt($(this).attr('data-order'));
var prev_order = $(this).siblings('.button[data-order="'+(this_order-1)+'"]');
if(prev_order.length>0) { $(this).insertAfter(prev_order); }
});
$('.button').css('top','0'); $('.button').removeAttr('data-order'); //reset
$('#log1').text('mouseup');
$('#log2').text('');
$('#log3').text('');
$('#log4').text('');
}
});
}
});
});