Как заметили дорогие читатели, в первой части содержимое моталось в противоположную логике сторону. Итак, чтобы сделать перемотку ортодоксальной поменять надо всего два знака сравнения:

if ( delta > 0 ) заменяем на if ( delta < 0 )

И, соответственно, наоборот для перемотки в другую сторону.

Но это фигня. Переходим к интересному. Задача: реализовать возможность перетаскивания содержимого айФона с помощью мыши.

Очевидно, что при попытке тащить что-то внутри айФона, текст будет выделяться. Чтобы избавиться от этого эффекта, подключим плагин jQuery Disable Text Select. Натравим его на блок с айФоном:

$('#myIphoneDiv').disableTextSelect();

Теперь заведем две переменные, которые будут помнить, где началось перетаскивание, и где оно закончилось: 

var oldY = 0;
var newY = 0; 

Отлично, теперь текст внутри айФона выделить нельзя. Займемся самым интересным: перетаскиванием. Для начала на событие mousedown повесим следующий обработчик:

$('#myIphoneDiv')
    .mousedown(function(e)
        {
        $('#innerDiv').stop();
        oldY = e.pageY;
        });

Мы остановили анимацию, если она была и запомнили, где был курсор мыши в момент начала перетаскивания.

Необходимо добавить еще два обработчика — на событие mousemove и mouseup. Но здесь я хочу обратить на кое-что ваше внимание.

Мы могли бы повесить обработчики на тот же блок #myIphoneDiv. Но тогда мы не сможем перемотать содержимое дальше, чем размер экрана айФона. Поэтому события mousemove и mouseup применим к объекту window:

$(window).mouseup(function(e)
     {
    //... 
    }).mousemove(function(e)
        {
        //...
        }); 

 На событии mouseup все что будет происходить — это обнуление переменной oldY и проверка, не перешли ли мы дальше чем в конец или начало содержимого айФона. Если перешли границу, то анимируем на начало или соответственно на конец:

$(window).mouseup(function(e)
    {
    oldY = 0;
    if( margintop > 0 ) //перешли дальше чем начало содержимого
        {
        margintop = 0;
        $('#innerDiv').animate({'marginTop':margintop}); // возвращаемся в начало
        }
    else if( difference + margintop < 0 )
        {
//перешли дальше чем конец содержимого
        margintop = - difference;
        $('#innerDiv').animate({'marginTop':margintop}); // возвращаемся в конец
        }
    });

Обработчик mousemove будет, в свою очередь, делать основную работу.

Мы должны узнать, какую дистанцию прошел курсор мышки и прибавить ее к margintop, и уже это значение присвоить свойству marginTop:

$(window).mousemove(function(e)
    {
    if(oldY!=0)
        {
        newY = e.pageY;
        margintop = margintop + newY - oldY;
        $('#innerDiv').css({ 'marginTop' : margintop});
        oldY = newY;
        }
    }); 

Вот, собственно, и все. Пример 2 готов.

В следующей части будет рассказано, как сделать, чтобы перемотка мышкой не была такой чопорной, и не останавливалась при отпускании кнопки мыши.

Удачи!