Плавный Drag & drop div элемента
 

Доброго времени суток.
Есть такая задача, при перетаскивание div элемента, когда его отпускаешь он должен плавно продолжить движение. Но вот беда в том что setTimeout, в котором вызывается функция перемещения, засунутый в цикл не работает. Подскажите, пожалуйста, как быть.

А зачем setTimeout засовывать в цикл?

Для того чтоб изменять насколько пикселей сместится элемент. Он должен с каждым разом "затухать", т.е. отпустили кнопку мыши он с начало движется быстро и затем все медленнее и медленнее.

ыыы, setInterval - вот вам setTimeout в цикле.

Один фиг не работает. Браузеры просто подвисают и элемент моментально перескакивает на конечную точку.

rootking,
мдеее, код приведите

А в цикле-то его зачем запускать? Это ж не sleep.

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;
        
    }
}

Прошу прощения, если код корявый:-?

Так где ошибка? по идеи он должен был выполниться 5 раз, и 5 раз останавливаться, но он не останавливается ни разу и браузер моментально перемещает элемент в конечное положение.