Блог

Я создаю простой слайдер с возможностью перетаскивания. На данный момент я использую pageX для определения позиции, например, так:

 var dragdir = 0,
    drag = null;
$('article.small-section').on('mousedown', function(ev) {
    drag = 1;
    dragdir = ev.pageX;
    if(drag) {
        $(this).css('cursor','move');
    }
}).on('mouseup', function(e){
    drag = null
    if(!drag) {
        $(this).css('cursor','initial');
        $(this).css('left','0')
    }
});

$('article.small-section').on('mousemove', function(e) {
    if(drag) {
        if(dragdir > e.pageX) {
            //console.log(dragdir '|' e.pageX)
            if(dragdir > e.pageX 100) {
                $(this).parent('section').cycle('prev');
            }
            $(this).css('right','');
            $(this).css('left','-' (parseInt(e.pageX/10)) 'px');
        } else {
            if(dragdir < e.pageX-100) {
                $(this).parent('section').cycle('next');
            }
            $(this).css('left','');
            $(this).css('right','-' (parseInt(e.pageX/10)) 'px');
        }

    }
});
  

Он отлично работает при перетаскивании вправо. Влево — это происходит, затем он отступает (или вообще не перемещается). Я заметил, что pageX это происходит — вот в чем проблема. Как я могу это исправить?

Рабочая скрипка: http://jsfiddle.net/2jEJH/1 /