Планировщик Fullcalendar Захватите и перетащите горизонтально

Я пытаюсь схватить и перетащить холст скроллера по горизонтали. Я могу прокручивать влево и вправо с помощью мыши (Apple Magic Mouse), но не смог понять, как реализовать захват и перетаскивание влево и вправо.

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

    $('.fc-scroller-canvas').on('mousedown', function(e) {
        console.log('pageX:::', e.pageX)
        $('.fc-scroller-canvas').on('mousemove', function(evt) {
                console.log('clientX:::', evt.clientX)
            $('.fc-scroller').stop(false, true).animate({
                scrollLeft: e.pageX - evt.clientX
            });
        });
    });
    $('.fc-scroller-canvas').on('mouseup', function() {
        $('.fc-scroller-canvas').off('mousemove');
    });

jQuery Захват содержимого и прокрутка страницы по горизонтали

Есть подсказка? Может кто поможет?


fullcalendar fullcalendar-scheduler
person Jose    schedule 16.03.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Спасибо @hman! Код работал как шарм!

Я внес некоторые изменения в свой, поэтому прокрутка активируется при нажатии и перетаскивании на .fc-time

        let pageX_Drag, pageY_Drag;
        let disableDragSelector = '.fc-event,.some-other-class-here-maybe';

        $('.fc-time-area').on('mousedown', '.fc-scroller', function (e) {
          // prevent drag from happening if we click on certain things
          let dragDisabledElms = $(e.target).parents(disableDragSelector).addBack(disableDragSelector);
          if (dragDisabledElms.length) return;

          pageX_Drag = e.pageX;
          pageY_Drag = e.pageY;

          $(window).off("mousemove", __mouseMove_Drag);
          $(window).on("mousemove", __mouseMove_Drag);
        });
        $(window).on('mouseup', __mouseUp_Drag);

        function __mouseUp_Drag() {
          $(window).off("mousemove", __mouseMove_Drag);
        }
        function __mouseMove_Drag(evt) {
          let offsetX = pageX_Drag - evt.pageX;
          let offsetY = pageY_Drag - evt.pageY;

          $('.fc-scroller', '.fc-time-area').each(function () {
            let scroller = $(this);
            let newX = scroller.scrollLeft() + offsetX;
            let newY = scroller.scrollTop() + offsetY;

            scroller.scrollLeft(newX);
            scroller.scrollTop(newY);
          });

          pageX_Drag = evt.pageX;
          pageY_Drag = evt.pageY;
        }
person juan847    schedule 17.08.2018

arrow_upward
0
arrow_downward

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

var pageX_Drag, pageY_Drag;
var disableDragSelector = '.fc-event,.some-other-class-here-maybe';

calendarElement.on('mousedown', '.fc-scroller', function (e)
{
    // prevent drag from happening if we click on certain things
    var dragDisabledElms = $(e.target).parents(disableDragSelector).addBack(disableDragSelector);
    if (dragDisabledElms.length) return;

    pageX_Drag = e.pageX;
    pageY_Drag = e.pageY;

    $(window).off("mousemove", __mouseMove_Drag);
    $(window).on("mousemove", __mouseMove_Drag);
});
$(window).on('mouseup', __mouseUp_Drag);

function __mouseUp_Drag()
{
    $(window).off("mousemove", __mouseMove_Drag);
}
function __mouseMove_Drag(evt)
{
    var offsetX = pageX_Drag - evt.pageX;
    var offsetY = pageY_Drag - evt.pageY;

    $('.fc-scroller', calendarElement).each(function ()
    {
        var scroller = $(this);
        var newX = scroller.scrollLeft() + offsetX;
        var newY = scroller.scrollTop() + offsetY;

        scroller.scrollLeft(newX);
        scroller.scrollTop(newY);
    });

    pageX_Drag = evt.pageX;
    pageY_Drag = evt.pageY;
}
person hman    schedule 17.08.2018