Привязать MouseMove с Mousedown Event (jQuery)

StackOverflow https://stackoverflow.com/questions/4547156

  •  13-10-2019
  •  | 
  •  

Вопрос

Я создаю горизонтальный сайт прокрутки. Не ненавиди! Кажется, все работает нормально, за исключением случаев, когда я связываю событие MouseMove на Mousedown, свойство Scrollft Dom не меняется. «Перемещение» и «MouseUp» оба написаны на консоли в соответствующее время. Вот мой код ... Изменить: Кроме того, я заметил, что если я напишу $ ('#incecuter'). Прокрутка в консоли на Mousedown, он возвращает функцию () 'вместо значения.

$(document).ready(function() {
    $('#container').mousedown(function(event) {
        $(this)
            .data('down',true)
            .data('x',event.pageX)
            .data('scrollLeft',this.scrollLeft)
            .css({'cursor':'url("http://www.loodieloodieloodie.com/images/closedhand.cur"),auto'});
        $('body').bind('mousemove',function(event) {
            console.log('moving');
            $('#container').scrollLeft = $('#container').data('scrollLeft') + ($('#container').data('x') - event.pageX) * 2;
        }).bind('mouseup',function() {
            $('#container')
                .data('down',false)
                .css({'cursor':'url("http://www.loodieloodieloodie.com/images/openhand.cur"),auto'});
            console.log('mouseup');
            $(this).unbind('mousemove');
        });
        return false;
    }).css({
        'overflow':'hidden',
        'cursor':'url("http://www.loodieloodieloodie.com/images/openhand.cur"),auto'
    });
});

А вот основной HTML ...

<body>
    <div id="container">
        <div id="inner">
            CONTENT
        </div>
    </div>
</body>

Спасибо за помощь, б

Это было полезно?

Решение

Здесь нет .scrollLeft имущество на объектах jQuery, поэтому вместо TIS:

$('#container').scrollLeft = $('#container').data('scrollLeft') + ($('#container').data('x') - event.pageX) * 2;

Ты нуждаешься в .scrollLeft() функция Позвоните как это:

$('#container').scrollLeft($('#container').data('scrollLeft') + ($('#container').data('x') - event.pageX) * 2);

или .css() Позвоните, как это:

$('#container').css({ scrollLeft: $('#container').data('scrollLeft') + ($('#container').data('x') - event.pageX) * 2 });
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top