jQuery: click+mousemove

[Беркут]

С использованием следующего кода:

$(function(){
	//Get our elements for faster access and set overlay width
	var div = $('div.sc_menu'),
		ul = $('ul.sc_menu'),
		ulPadding = 15;

	//Get menu width
	var divWidth = div.width();

	//Remove scrollbars	
	div.css({overflow: 'hidden'});

	//Find last image container
	var lastLi = ul.find('li:last-child');

	//When user move mouse over menu


		div.mousemove(function(e){
			//As images are loaded ul width increases,
			//so we recalculate it each time
			var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;	
			var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
			div.scrollLeft(left);
	});


});

Получаем возможность пролистывать изображения движением мышки поперек Дива.. как тут http://berkut.me/test

Подскажите, как можно сюда еще добавить "прокручиваеть если нажата мышка", чтобы получился эффект как в айфоне с пролистыванием картинок, при этом нужно сохранить возможность выполнять отдельно javascript при простом клике на картинку..

Плиз, хелп.. очень нужно..

[Veseloff]

стоит, наверное, загуглить «drag and drop jquery»

[Беркут]

Спасибо помогло, но возникли следующие вопросы:

1)Как ограничить перемещение объекта когда вывелось последнее изображение? (сейчас получается так что ленту можно прокрутить по конца и вообще увести ее за видимую область, как в одну сторону так и в другую)

2)Как создать эффект плавного "проезда" летны после отпускания мышки, на подобие просмотра фоток в айфоне?

Edited December 12, 2010 by Беркут

[Great Rash]

1)Как ограничить перемещение объекта когда вывелось последнее изображение? (сейчас получается так что ленту можно прокрутить по конца и вообще увести ее за видимую область, как в одну сторону так и в другую)

Проверять что объект который тянется находится в границах необходимой зоны, т.е. его координаты не вышли за пределы. Если вышли приравнивать коордтнаты максимальному/минимальному значению. Вот так примерно (псевдокод):

var x = object.x; // координаты левой стороны
var x1 = object.x + object.width; // координаты правой стороны

var X = container.x; // левая сторона контейнера
var X1 = container.x + container.width; // правая сторона контейнера

if (x > X)  x = X;
if (x1 < X1) x = x1;

Как-то так...