Показать сообщение отдельно
  #3 (permalink)  
Старый 14.12.2011, 23:36
Новичок на форуме
Отправить личное сообщение для Gosha Посмотреть профиль Найти все сообщения от Gosha
 
Регистрация: 25.11.2011
Сообщений: 9

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


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


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