Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.07.2010, 17:32
Новичок на форуме
Отправить личное сообщение для maximalmax90 Посмотреть профиль Найти все сообщения от maximalmax90
 
Регистрация: 19.07.2010
Сообщений: 5

Неправильно работает скрипт
Я не специалист по javascript, но уж очень нужно...
Вот скрипт, которым поделился один человечек. Скрипт работал только в Opera, я чуть подправил, тперь он работает и в IE и в Firefox =) Но есть одна проблема, в Firefox, как-то неправильно:

<SCRIPT language="JavaScript">
var ua = navigator.userAgent.toLowerCase();
isIE = (ua.indexOf("msie") != -1 && ua.indexOf("opera") == -1);
isOpera = (ua.indexOf("opera") != -1);
isGecko = (ua.indexOf("gecko") != -1);
isSafari = (ua.indexOf("safari") != -1);
isKonqueror = (ua.indexOf("konqueror") != -1);

document.onmousedown = OnMouseDown;
document.onmousemove = OnMouseMove;
document.onmouseup = OnMouseUp;

var stating = 0;
var DRAG=false;

function OnMouseDown(event)
{
	if (event == null)
	{
		event = event||window.event;
	}
	target = event.target||event.srcElement;
	action_obj = target.id;

	if (isIE)
	{
		offsetY = event.offsetY;
	}
	else
	{
		offsetY = event.pageY - target.offsetTop;
	}

	distance = 0;
	dragObjects = document.getElementById('drag').getElementsByTagName('*');
	for (var i = 0; i < dragObjects.length; i++) 
	{ 
		if(dragObjects[i].id == action_obj)
		{
			action_obj = i;
		}
		dragObjects[i].start = dragObjects[i].offsetTop; // Начальная расположение
		dragObjects[i].height = dragObjects[i].clientHeight + 2; // Высота объекта с рамкой
	} 
	if(stating == 0) 
	{ 
		for(var i=0; i < dragObjects.length; i++)
		{
			dragObjects[i].style.position = 'absolute';
			dragObjects[i].style.top = dragObjects[i].start;
		}
		stating = 1;
	}
	DRAG=true;
}

function OnMouseMove(event)
{

	if(DRAG==true)
	{	
		if (event == null)
		{
			event = event||window.event;
		}

		distance = 0; // При изменении координат мыши сбить счётчик пройденного
		Y = event.clientY+document.body.scrollTop || event.clientY || event.pageY || event.y;
		mouseY=parseInt(Y); // Координаты мышки при движении
		dragObjects[action_obj].style.top = mouseY - offsetY - 5 + document.body.scrollTop; // Динамичное передвижение объекта за мышкой
		dragObjects[action_obj].style.zIndex=2; // Чтобы работало везде
		
		for(var i=0; i<dragObjects.length; i++)
		{
			if(i != action_obj)
			{	
				var center_act_now = dragObjects[action_obj].offsetTop + dragObjects[action_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[action_obj].start)
				{
					// То поднять проверяемый на высоту перетаскиваемого
					dragObjects[i].style.top = dragObjects[i].start - dragObjects[action_obj].height;
					distance += dragObjects[i].height;
				}
				// И наоборот - если сейчас выше, а в начале была ниже
				else if(center_act_now < center_cur_now && center_cur < dragObjects[action_obj].start)
				{
					// То опустить
					dragObjects[i].style.top = dragObjects[i].start + dragObjects[action_obj].height;
					distance -= dragObjects[i].height;
				}
				// Во всех противных случаях вернуть затронутые объекты их на начальные расположения
				else 
				{
					dragObjects[i].style.top = dragObjects[i].start;
				}
			}
		}
	}
	return false; // Против выделения тескта при выдедении
}
function OnMouseUp(event)
{ // Действия после отпускания кнопки
	dragObjects[action_obj].style.top = dragObjects[action_obj].start + distance; // Передвигаем ровно на высоту пройденных объекстов
	dragObjects[action_obj].style.zIndex=1; // Для всех браузеров
	save(); // Вычислить порядок элементов
	DRAG=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;
	}

</script>

<style>
#drag *{cursor:move; border: 1px solid #ccc; background-color: #eee; width:200; height:20; z-index:1;}
.dragging {z-index:2; opacity:0.8; FILTER: Alpha(opacity=80);}
.draggingReset {z-index:1; opacity:1.0; FILTER: none;}
</style>

<BODY>
<div id=drag>
<div id=div1>div1</div>
<div style=height:50 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>





Проверял, проблема, вроде как возникает тут:
if(center_act_now > center_cur_now && center_cur > dragObjects[action_obj].start)
				{
					// То поднять проверяемый на высоту перетаскиваемого
					dragObjects[i].style.top = dragObjects[i].start - dragObjects[action_obj].height;
					distance += dragObjects[i].height;
				}
				// И наоборот - если сейчас выше, а в начале была ниже
				else if(center_act_now < center_cur_now && center_cur < dragObjects[action_obj].start)
				{
					// То опустить
					dragObjects[i].style.top = dragObjects[i].start + dragObjects[action_obj].height;
					distance -= dragObjects[i].height;
				}
				// Во всех противных случаях вернуть затронутые объекты их на начальные расположения
				else 
				{
					dragObjects[i].style.top = dragObjects[i].start;
				}

В Firefox почему-то страбатывает только условие ELSE

Последний раз редактировалось maximalmax90, 20.07.2010 в 04:14.
Ответить с цитированием
  #2 (permalink)  
Старый 19.07.2010, 19:26
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 20.07.2010, 15:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

попробуй для начала во все style.top добавить +'px'
width и height в CSS тоже пишуться с пикселами (px), дюймами (in), пункттами (pt) и др.

Последний раз редактировалось рони, 20.07.2010 в 15:11.
Ответить с цитированием
  #4 (permalink)  
Старый 20.07.2010, 16:33
Новичок на форуме
Отправить личное сообщение для maximalmax90 Посмотреть профиль Найти все сообщения от maximalmax90
 
Регистрация: 19.07.2010
Сообщений: 5

Не помогло( Я же говорю, что проблема при проверке условий возникает((((( Если убрать ELSE заработает лучше, но не без косяков, но ELSE тоже необходим
Ответить с цитированием
  #5 (permalink)  
Старый 21.07.2010, 01:10
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

Сообщение от maximalmax90
В Firefox почему-то страбатывает только условие ELSE
нам что, отладить вашу программу?
есть куча инструментов для отладки.
отлажитвайте сами
Ответить с цитированием
  #6 (permalink)  
Старый 21.07.2010, 03:02
Новичок на форуме
Отправить личное сообщение для maximalmax90 Посмотреть профиль Найти все сообщения от maximalmax90
 
Регистрация: 19.07.2010
Сообщений: 5

Да в том-то и дело, что ни один Debug не видит ошибки, даже Firefox'овский!!!
P.S.: если бы я сам мог отладить, то не обратился сюда!

Последний раз редактировалось maximalmax90, 21.07.2010 в 03:05.
Ответить с цитированием
  #7 (permalink)  
Старый 22.07.2010, 04:09
Новичок на форуме
Отправить личное сообщение для maximalmax90 Посмотреть профиль Найти все сообщения от maximalmax90
 
Регистрация: 19.07.2010
Сообщений: 5

Удалось обнаружить, что все условия проверяются нормально, но при перемещении он увеличивает top, а потом сразу возвращает его исходное значение, т.е. сначала срабатывает ELSE IF, а потом ELSE
Ответить с цитированием
  #8 (permalink)  
Старый 22.07.2010, 05:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

в чём выражаеться глюк я так и непонял...можно мне на пальцах обьяснить? )))
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
  <title></title>
<style type="text/css">
body{margin:0px;}
#drag * {cursor:move; border: 1px solid #CCCCCC; background-color: #EEEEEE; width:200px; height:20px; z-index:1;}
.dragging {z-index:2; opacity:0.8; FILTER: Alpha(opacity=80);}
.draggingReset {z-index:1; opacity:1.0; FILTER: none;}
</style>
<script language="JavaScript" type="text/javascript">
var ua = navigator.userAgent.toLowerCase();
isIE = ua.indexOf("msie") != -1 && ua.indexOf("opera") == -1;
isOpera = ua.indexOf("opera") != -1;
isGecko = ua.indexOf("gecko") != -1;
isSafari = ua.indexOf("safari") != -1;
isKonqueror = ua.indexOf("konqueror") != -1;
document.onmousedown = OnMouseDown;
document.onmousemove = OnMouseMove;
document.onmouseup = OnMouseUp;
var stating = 0,
    DRAG = false;

function OnMouseDown(a) {
    if (a == null) a = a || window.event;
    target = a.target || a.srcElement;
    action_obj = target.id;
    offsetY = isIE ? a.offsetY : a.pageY - target.offsetTop;
    distance = 0;
    dragObjects = document.getElementById("drag").getElementsByTagName("*");
    for (a = 0; a < dragObjects.length; a++) {
        if (dragObjects[a].id == action_obj) action_obj = a;
        dragObjects[a].start = dragObjects[a].offsetTop;
        dragObjects[a].height = dragObjects[a].clientHeight + 2
    }
    if (stating == 0) {
        for (a = 0; a < dragObjects.length; a++) {
            dragObjects[a].style.position = "absolute";
            dragObjects[a].style.top = dragObjects[a].start+"px"
        }
        stating = 1
    }
    DRAG = true
}

function OnMouseMove(a) {
    if (DRAG == true) {
        if (a == null) a = a || window.event;
        distance = 0;
        Y = a.clientY + document.body.scrollTop || a.clientY || a.pageY || a.y;
        mouseY = parseInt(Y);
        dragObjects[action_obj].style.top = mouseY - offsetY - 5 + document.body.scrollTop+"px";
        dragObjects[action_obj].style.zIndex = 2;
        for (a = 0; a < dragObjects.length; a++) if (a != action_obj) {
            var c = dragObjects[action_obj].offsetTop + dragObjects[action_obj].height / 2,
                b = dragObjects[a].start + dragObjects[a].height / 2,
                d = dragObjects[a].offsetTop + dragObjects[a].height / 2;
            if (c > d && b > dragObjects[action_obj].start) {
                dragObjects[a].style.top = dragObjects[a].start - dragObjects[action_obj].height+"px";
                distance += dragObjects[a].height
            } else if (c < d && b < dragObjects[action_obj].start) {
                dragObjects[a].style.top = dragObjects[a].start + dragObjects[action_obj].height+"px";
                distance -= dragObjects[a].height
            } else dragObjects[a].style.top = dragObjects[a].start+"px"
        }
    }
    return false
}

function OnMouseUp() {
    dragObjects[action_obj].style.top = dragObjects[action_obj].start + distance+"px";
    dragObjects[action_obj].style.zIndex = 1;
    save();
    DRAG = false
}
function save() {
    for (var a = [], c = "", b = 0; b < dragObjects.length; b++) a[b] = Array(dragObjects[b].id, dragObjects[b].offsetTop);
    a.sort(function (d, e) {
        return d[1] > e[1] ? 1 : d[1] < e[1] ? -1 : 0
    });
    for (b = 0; b < dragObjects.length; b++) c += a[b][0] + "|";
    document.getElementById("save").value = c
};
</script>
</head>

<body>
  <div id="drag">
    <div id="div1">
      div1
    </div>

    <div style="height:50px" id="div2">
      div2
    </div>

    <div id="div3">
      div3
    </div>

    <div id="div4">
      div4
    </div>
  </div>

  <form>
    <input style="position:absolute;top:10px;left:300px" id="save" value="result">
  </form>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 22.07.2010, 05:40
Новичок на форуме
Отправить личное сообщение для maximalmax90 Посмотреть профиль Найти все сообщения от maximalmax90
 
Регистрация: 19.07.2010
Сообщений: 5

Все, работает, спасибо огромно!!! )))))))))))))))))))))))))))))
P.S.: Но я все равно так и не понял, что у меня было не так О.о

Последний раз редактировалось maximalmax90, 22.07.2010 в 05:46.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт не работает в FF и опера, но работает в IE(в чем дело???) Cepera Firefox/Mozilla 1 24.08.2012 16:46
скрипт работает только в IE, а в остальных браузерах нет. melodicman Firefox/Mozilla 0 23.06.2010 15:18
Скрипт неправильно работает в FF InviS Общие вопросы Javascript 6 11.04.2010 16:56
Почему не работает скрипт, подскажите aviaks Ваши сайты и скрипты 2 05.05.2009 14:38
Скрипт меню-гармошки работает выборочно Extern Элементы интерфейса 2 23.02.2009 15:32