События касания noUiSlider не работают в фундаменте вне меню - PullRequest
Новая
       12

События касания noUiSlider не работают в фундаменте вне меню

0 голосов
/ 24 июня 2018

Я использую noUiSlider в меню Foundation 6 вне холста, и ручки-слайдеры не будут перетаскиваться на сенсорных устройствах.Это работает, если noUiSlider вложен вне меню вне холста, и даже отлично работает в меню вне холста при использовании мыши для перетаскивания ручек.Однако, когда я эмулирую сенсорные события или фактически пытаюсь перетащить маркеры ползунков на сенсорном устройстве, маркеры слайдеров не перемещаются и остаются зафиксированными на месте.

HTML: 

<div class="off-canvas position-right" id="offCanvasNestedPush" data-content-scroll="false" data-off-canvas>
    <div class="row align-middle" id="fr_wrapper_price_slider" data-initial-start="0" data-initial-end="10000000">
        <div class="columns small-12">
            <!-- noUiSlider -->
            <div id="fr_price_slider"></div>
        </div>
    </div>
</div>

JS: 

var fr_price_slider_wrapper = document.getElementById('fr_wrapper_price_slider');
var fr_price_slider = document.getElementById('fr_price_slider');
noUiSlider.create(fr_price_slider, {
    /* Slider Positions on DOM Load */
    start: [
        fr_price_slider_wrapper.getAttribute('data-initial-start'),
        fr_price_slider_wrapper.getAttribute('data-initial-end')
    ],
    behaviour: 'drag',
    connect: true,
    range: {
        'min': [ 0, 5000 ],
        '50%': [ 1000000, 50000 ],
        'max': [ 10000000 ]
    }
});

Ответы [ 2 ]

0 голосов
/ 04 июля 2018

Как вы уже выяснили, за это отвечает опция contentScroll, поскольку она предотвращает сенсорные события, если она включена.Ваше 'исправление' не является реальным решением, потому что эта опция имеет право на существование!

Существуют варианты использования (например, в моих проектах), где вам это нужно.Однако решением будет дополнительная опция для noUiSlider, которая предоставляет возможность изменить область действия слайдера.

Я представил PR за этот последний год, который еще не был объединен https://github.com/leongersen/noUiSlider/pull/821

0 голосов
/ 24 июня 2018

Причина, по которой я сам отвечаю на этот вопрос, заключается в том, что я не смог найти ни одного вопроса в StackOverflow, в котором задавался вопрос об этой проблеме, и это действительно простое решение. В документации Foundation 6 для меню вне холста не упоминается, что настройка data-content-scroll="false" может блокировать сенсорные события для сторонних сценариев, вложенных в меню вне холста. Я потратил гораздо больше времени, чем должен был отладить эту проблему, и я надеюсь, что это спасет кого-то в будущем.

Исправление:

Удалите атрибут data-content-scroll="false" из элемента меню вне холста, и noUiSlider будет работать должным образом.

...