Drag&Drop Сортировка

[Gosha]

Здравствуйте, товарищи! У меня есть жесткая необходимость в Drag&Drop сортировке списков, вот таким образом http://tool-man.org/examples/sorting.html (Часть под заголовком "Example: Add Some Style" и список под ней тот, что длинный вертикальный)

Скачать-то я его скачал. Теперь копирую ту часть которая мне нужна. И она не работает. Думал, может не захватил какую-то часть скриптов... Взял всю страницу целиком, и в исходном коде постепенно убирал ненужные мне способы сортировки, чтоб оставить один единственный. И, вдруг выяснилось, что одна без другой работать не может. А нахрена мне весь набор? В общем, мне не хватает опыта, чтоб разобраться во всем этом деле. Может у вас где-нибудь запылился старый добрый простой подобный скрипт.

На jQuery видел уже, но там они все сделаны так что после каждого перетаскивания идет обновление ячеек базы данных. А мне такой подход не нужен. Я хочу отсортировать, нажать на кнопку и весь результат получить в виде строки который потом отправлю в PHP файл, где разберу и сделаю с ним ужасные вещи.

Заранее спасибо.

[dmitriymar]

запылился старый добрый простой подобный скрипт.

запылился,писал для себя- навряд ли ты в нём разберёшься.

[Gosha]

Вот раздобыл я такой скрипт, который проделвывает все что нужно

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">

Он работает, когда кроме этого на странице ничего нет. Но когда встраиваю его в страничку с парой других скриптов, работает некорректно. Может тут есть какой-то подводный камень?

[m4gz]

Здесь логика нарушена, что-то с расчетами, они слезают прыгают и тп.. да и стиль может в блоки обернуть и отступы убрать?

[m4gz]

http://jsfiddle.net/qTuaU/
правда фраймворки я их не люблю
http://dev.sencha.com/deploy/ext-3.3...al/portal.html
не знаю но мне кажется, что если это не твоих рук дело проще взять что ни будь за основу типа этого

window.onload = function() {
    var foo,
        offsetX,
        offsetY;
 
    // so it exists
    foo = document.createElement("div");
    document.body.appendChild(foo);
 
    // so we can see it:
    foo.style.width = "100px";
    foo.style.height = "100px";
    foo.style.backgroundColor = "blue";
 
    // so we can move it where we want:
    foo.style.position = "absolute";
 
    // so it looks like something we should click on
    foo.style.cursor = "pointer";
 
    foo.onmousedown = function(event) {
        // where is the mouse in relation to the div?
        offsetX = event.clientX - parseInt(foo.style.left || 0);
        offsetY = event.clientY - parseInt(foo.style.top || 0);
 
        // add listeners
        document.onmousemove = onMouseMove;
        document.onmouseup = onMouseUp;
 
        // prevent event propagation
        event.preventDefault();
        return false;
    }
 
    function onMouseMove(event) {
        // move the div in relation to the mouse
        foo.style.left = event.clientX - offsetX;
        foo.style.top = event.clientY - offsetY;
    }
 
    function onMouseUp(event) {
        // remove listeners
        document.onmousemove = null;
        document.onmouseup = null;
    }
}

[m4gz]

Совсем забыл про http://tool-man.org/examples/sorting.html
довольно приятный фраймворк, к сожалению он уже давно не поддерживается и существование серьезных багов вынудило меня отвернуться