Disable Touch on Materialize Carousel

送分小仙女□ 提交于 2019-12-06 16:38:54

in Materialize.js add/edit:

var allowCarouselDrag = true;
value: function _handleCarouselDrag(e) {
    if(allowCarouselDrag){
       ....
    }
}

You can set the allowCarouselDrag variable per application.

This is far from a perfect solution, and it might disable too much of the functionality in your case, I'm not sure. An option to turn this on/off would be much appreciated.

But for my needs, turning off the events on the carousel did the job:

var carousel = $('.carousel.carousel-slider').carousel();
// Disable all swipping on carousel
if (typeof window.ontouchstart !== 'undefined') {
    carousel.off('touchstart.carousel');
}
carousel.off('mousedown.carousel');
Lester Juan De Dios Villar Zam
function tap(e) {

    pressed = true;
    dragged = false;
    vertical_dragged = true;
    reference = xpos(e);
    referenceY = ypos(e);

    velocity = amplitude = 0;
    frame = offset;
    timestamp = Date.now();
    clearInterval(ticker);
    ticker = setInterval(track, 100);
}

I have attempted to solve this problem for the past ~three days and have come to the conclusion that there is no clean solution other than directly editing the materialize.js file as in Lester's answer. Unfortunately, this is not an ideal solution as it causes issues when updating Materialize etc.
The simplest solution that I have come up with after this time is the following piece of javascript:

window.onload = function() {    
    window.mouseDownNow = false;
    // The selector below must be more specific than .carousel.carousel-slider in
    // order for the event to be cancelled properly.
    $('.class-added-to-block-swiping-functionality')
    .mousedown(function() {
        window.mouseDownNow = true;
    })
    .mousemove(function(event) {
        if(window.mouseDownNow) {
            event.stopPropagation();
        }
    })
    .mouseup(function() {
        window.mouseDownNow = false;
    });
};

This will simply stop the event from bubbling to the Materialize swiping functionality.
Note: I am not sure how specific the selector must be, mine were classes that were specific to text areas.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!