Вот раздобыл я такой скрипт, который проделвывает все что нужно
var cof=false; var absoluting = 0;
function down(){ // Действия при клике
distance = 0; // Для дальнейшего подсчёта высот пройденных объектов, чтобы поставить передвигаемый ровно
offsetY=parseInt(window.event.offsetY); // Разница между курсором и верхней границей объекта
act_obj = window.event.srcElement.id; // ID передвигаемого объекта
dragObjects = document.getElementById('drag123').getElementsByTagName('*'); // Все элементы внутри указанной
for(var i=0; i<dragObjects.length; i++) { // Придача каждому его высоты и начальных координат
if(dragObjects[i].id == act_obj) act_obj = i; // Обозначить номер передвигаемого объекта
dragObjects[i].start = dragObjects[i].offsetTop; // Начальная расположение
dragObjects[i].height = dragObjects[i].clientHeight+2; // Высота объекта с рамкой
}
if(absoluting==0) { // Сделать все объекты абсолютно позиционированными (только в первый раз)
for(var i=0; i<dragObjects.length; i++){
dragObjects[i].style.position = 'absolute';
dragObjects[i].style.top = dragObjects[i].start;
}
absoluting = 1;
}
cof=true;
}
function move(){ // Действия при зажатой кнопке
if(cof==true){
distance = 0; // При изменении координат мыши сбить счётчик пройденного
mouseY=parseInt(window.event.y); // Координаты мышки при движении
dragObjects[act_obj].style.top=mouseY-offsetY-5+document.body.scrollTop; // Динамичное передвижение объекта за мышкой
dragObjects[act_obj].className = 'dragging'; // Придаём визуальные свойства передвигаемому объекту (CSS)
dragObjects[act_obj].style.zIndex=2; // Чтобы работало везде
for(var i=0; i<dragObjects.length; i++) {
if(i != act_obj){ // Проверить расположение всех объектов, кроме перетаскиваемого
var center_act_now = dragObjects[act_obj].offsetTop + dragObjects[act_obj].height/2; // Динамичное (постоянно меняющееся) расположение середны проверяемого
var center_cur = dragObjects[i].start + dragObjects[i].height/2; // Начальное расположение середны проверяемого
var center_cur_now = dragObjects[i].offsetTop + dragObjects[i].height/2; // Динамичное расположение середны проверяемого
// Если середина перетаскиваемого объекта сейчас ниже середины проверяемого И изначально была выше
if(center_act_now > center_cur_now && center_cur > dragObjects[act_obj].start){
// То поднять проверяемый на высоту перетаскиваемого
dragObjects[i].style.top = dragObjects[i].start - dragObjects[act_obj].height;
distance += dragObjects[i].height;}
// И наоборот - если сейчас выше, а в начале была ниже
else if(center_act_now < center_cur_now && center_cur < dragObjects[act_obj].start){
// То опустить
dragObjects[i].style.top = dragObjects[i].start + dragObjects[act_obj].height;
distance -= dragObjects[i].height;}
// Во всех противных случаях вернуть затронутые объекты их на начальные расположения
else dragObjects[i].style.top = dragObjects[i].start;
}
}
}
return false; // Против выделения тескта при выдедении
}
function up(){ // Действия после отпускания кнопки
dragObjects[act_obj].style.top = dragObjects[act_obj].start + distance; // Передвигаем ровно на высоту пройденных объекстов
dragObjects[act_obj].innerHTML += ' *'; // Кому не надо - можно убрать строчку
dragObjects[act_obj].className = 'draggingReset' // Возвращаем начальные визуальные настройки
dragObjects[act_obj].style.zIndex=1; // Для всех браузеров
save(); // Вычислить порядок элементов
cof=false;
}
function save(){ // Сортировка элементов по их расположению и результат записываем в input
var dragSort = new Array();
var saveOutput = "";
for(var i=0; i<dragObjects.length; i++) dragSort[i] = Array(dragObjects[i].id, dragObjects[i].offsetTop);
dragSort.sort(function(i,ii){if (i[1] > ii[1]) return 1; else if (i[1] < ii[1]) return -1; else return 0;});
for(var i=0; i<dragObjects.length; i++) saveOutput += dragSort[i][0]+"|";
document.getElementById('save').value = saveOutput;
}
document.onmousedown = down;
document.onmousemove = move;
document.onmouseup = up;
<style>
#drag123 *{
cursor:move;
border: 1px solid #ccc;
background-color: #eee;
width:200px;
height:30px;
z-index:1;
margin:3px 0;
}
.dragging{
z-index:2;
}
.draggingReset {
z-index:1;
}
</style>
<div id="drag123">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
</div>
<input style="position:absolute;top:10;left:300;" id="save" value="result">
Он работает, когда кроме этого на странице ничего нет. Но когда встраиваю его в страничку с парой других скриптов, работает некорректно. Может тут есть какой-то подводный камень?