Javascript.RU

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

Плавный Drag & drop div элемента
Доброго времени суток.
Есть такая задача, при перетаскивание div элемента, когда его отпускаешь он должен плавно продолжить движение. Но вот беда в том что setTimeout, в котором вызывается функция перемещения, засунутый в цикл не работает. Подскажите, пожалуйста, как быть.
Ответить с цитированием
  #2 (permalink)  
Старый 07.09.2010, 12:26
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

А зачем setTimeout засовывать в цикл?
Ответить с цитированием
  #3 (permalink)  
Старый 07.09.2010, 12:30
Новичок на форуме
Отправить личное сообщение для rootking Посмотреть профиль Найти все сообщения от rootking
 
Регистрация: 07.09.2010
Сообщений: 5

Для того чтоб изменять насколько пикселей сместится элемент. Он должен с каждым разом "затухать", т.е. отпустили кнопку мыши он с начало движется быстро и затем все медленнее и медленнее.
Ответить с цитированием
  #4 (permalink)  
Старый 07.09.2010, 12:32
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

ыыы, setInterval - вот вам setTimeout в цикле.
__________________
.
Ответить с цитированием
  #5 (permalink)  
Старый 07.09.2010, 12:35
Новичок на форуме
Отправить личное сообщение для rootking Посмотреть профиль Найти все сообщения от rootking
 
Регистрация: 07.09.2010
Сообщений: 5

Один фиг не работает. Браузеры просто подвисают и элемент моментально перескакивает на конечную точку.
Ответить с цитированием
  #6 (permalink)  
Старый 07.09.2010, 12:36
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,813

rootking,
мдеее, код приведите
__________________
.
Ответить с цитированием
  #7 (permalink)  
Старый 07.09.2010, 12:38
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

А в цикле-то его зачем запускать? Это ж не sleep.
Ответить с цитированием
  #8 (permalink)  
Старый 07.09.2010, 12:43
Новичок на форуме
Отправить личное сообщение для rootking Посмотреть профиль Найти все сообщения от rootking
 
Регистрация: 07.09.2010
Сообщений: 5

var d;
addEvent(document, 'mousedown', mousedown);

function mousedown(e){
	e = e || event;
	var target = e.target || e.srcElement;
	if (target.className == 'top' && target.parentNode.className == 'drag') {
		d = target.parentNode;
		d.startX = parseInt (getStyle(d, 'left'));
		d.startY = parseInt (getStyle(d, 'top'));
		d.mouseX = e.clientX;
		d.mouseY = e.clientY;
		d.X = document.documentElement.clientWidth;
		d.Y = document.documentElement.clientHeight;
		addEvent(document, 'mousemove', mousemove);
		addEvent(document, 'mouseup', mouseup);
		
	}
	
}

function mousemove(e){
	e = e || event;
	var target = e.target || e.srcElement;
	cancelEvent(e);
	d.style.left = d.startX + (e.clientX - d.mouseX) + 'px';
	d.style.top = d.startY + (e.clientY - d.mouseY) + 'px';
	if (d.startX + e.clientX > d.mouseX) {
		if (d.X - e.clientX > d.offsetWidth + d.startX - d.mouseX) {
			moveX(d.startX + e.clientX - d.mouseX);
		} else {
			moveX(d.X - d.offsetWidth);
		}
	} else {
		moveX(0);
	}
	if (d.startY + e.clientY > d.mouseY) {
		//moveY(d.startY + (e.clientY - d.mouseY));
		if (d.Y - e.clientY > d.offsetHeight + d.startY - d.mouseY) {
			moveY(d.startY + e.clientY - d.mouseY);
		} else {
			moveY(d.Y - d.offsetHeight);
		}
	} else{
		moveY(0);
	}
}

function mouseup(e){
	e = e || event;
	var target = e.target || e.srcElement;
        moveTX();
	removeEvent(document, 'mousemove', mousemove);
	removeEvent(document, 'mouseup', mouseup);
}

function moveX(x){
	d.style.left = x + 'px';
	
}
function moveY(y){
	d.style.top = y + 'px';
}

function moveTX(){
	for (var i=0, b=128; i<5; i++){
        setTimeout(d.style.left = (parseInt(d.style.left)+b) + 'px',1000);
        b=b/2;
        
    }
}

Прошу прощения, если код корявый
Ответить с цитированием
  #9 (permalink)  
Старый 07.09.2010, 12:45
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

http://javascript.ru/setTimeout
Ответить с цитированием
  #10 (permalink)  
Старый 07.09.2010, 12:53
Новичок на форуме
Отправить личное сообщение для rootking Посмотреть профиль Найти все сообщения от rootking
 
Регистрация: 07.09.2010
Сообщений: 5

Сообщение от Kolyaj Посмотреть сообщение
http://javascript.ru/setTimeout
Так где ошибка? по идеи он должен был выполниться 5 раз, и 5 раз останавливаться, но он не останавливается ни разу и браузер моментально перемещает элемент в конечное положение.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Границы элемента DIv gosha_kap Общие вопросы Javascript 1 06.07.2009 17:12
Подгрузка элемента из div через Appendto Vitaly jQuery 5 24.06.2009 10:54
drag and drop kalisha Элементы интерфейса 2 15.09.2008 11:11
Drag & Drop вопрос f1n jQuery 3 29.06.2008 15:47
Drag & Drop в полном объеме dizews Events/DOM/Window 3 26.07.2007 12:43