Question

我试图水平抓取并拖动滚动画布。我可以向左滚动＆amp;用我的鼠标（苹果魔术鼠标），但还没有弄清楚如何实现抓取和拖动左和右右。

我尝试按照以下链接中的说明操作，但是页面X＆amp; 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 Grab Content and Scroll page horizontally

有任何线索吗？有人可以帮忙吗？

Answer 1

这是我允许垂直和水平平移日历的方法。您应该能够轻松地对其进行修改，使其仅在需要时才水平运行。我仅使用时间轴视图对此进行了测试，但它应该适用于所有视图。

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;
}

Answer 2

谢谢@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;
        }

Fullcalendar Scheduler抓取并拖动水平

2 个答案: