я сделал селектом. яваскрипт двигает опшины в селекте в любом направлении. при сабмите все валуезы списываются в хидден поле через запятую и отправляются на сервер.
Каждая строка в базе находящаяся в определенной группе (как файлы в папке) имеет поле order. Строки выводятся сортируясь по этому полю.
На сервере строка експодится в массив (тут подразумевается что порядок елементов через запятую будет соответствовать порядку елементов в массиве)
Соответственно апдейтятся все поля группы в соответствии с массивом полученным из хидден поля.
Плюсы:
+ не надо тыкать в тупые ссылки вверх/внихз и ждать загрузки страници
+ поднятие на 100 позиций вверх будет не таким гемором как в варианте с линками
+ если подумать можно сделать два селекта, между которыми будут перебрасываться элементы менюхи (или чего ты там тягать собрался). Тогда можно легко сотую позицию скинуть в буфер быстро промотать и вернуть назад под текущую строку.
вот код который тягает элементы
Код:
/*
/ $direction: true - DOWN, false - UP
*/
function moveOption(direction)
{
//get SELECT object
var sel=document.getElementById('select1');
//test
if(direction && sel.selectedIndex==sel.options.length-1) return false;
if(!direction && sel.selectedIndex==0) return false;
//get selected OPTION
var cur_opt=sel.options[sel.selectedIndex];
//save data from current OPTION
tmp_value=cur_opt.value;
tmp_caption=cur_opt.innerHTML;
//get next after selected OPTION
if(direction) next_index=sel.selectedIndex+1; else next_index=sel.selectedIndex-1;
var next_opt=sel.options[next_index];
//copy data from next OPTION to current OPTION
cur_opt.value=next_opt.value;
cur_opt.innerHTML=next_opt.innerHTML;
//save temp data to current OPTION
next_opt.value=tmp_value;
next_opt.innerHTML=tmp_caption;
//make next OPTION current
(direction) ? sel.selectedIndex++ : sel.selectedIndex--;
}
этот код тягает опции между селектами правда возвращает ее назад пока на последнюю позицию.
Код:
/*
/ direction: true- drop, false - repair
*/
function deletingOption(direction)
{
if(direction)
{
var selSource=document.getElementById('select1');
var selTarget=document.getElementById('select2');
}
else
{
var selSource=document.getElementById('select2');
var selTarget=document.getElementById('select1');
}
if(selSource.selectedIndex==-1) return;
//copy data from list
cur_index=selSource.selectedIndex;
if(cur_index==selSource.options.length-1) cur_index--;
tmp_caption=selSource.options[selSource.selectedIndex].innerHTML;
tmp_value=selSource.options[selSource.selectedIndex].value;
//paste to recycle
oDLL=document.createElement('OPTION');
oDLL.value=tmp_value;
oDLL.innerHTML=tmp_caption;
selTarget.appendChild(oDLL);
selTarget.selectedIndex=selTarget.options.length-1;
//drop item from list
selSource.options[selSource.selectedIndex].removeNode();
selSource.selectedIndex=cur_index;
}