Как предотвратить прокрутку в событии d3.drag () на мобильном телефоне? - PullRequest
Новая
       12

Как предотвратить прокрутку в событии d3.drag () на мобильном телефоне?

0 голосов
/ 19 сентября 2019

ДЕЛО

У меня есть два ползунка, которые состоят из объекта rect, который можно перетаскивать по горизонтали с помощью d3.drag() и регулирует размердиаграммы, которую я создал.Поскольку эта диаграмма может расширять границы SVG width, я автоматически настраиваю viewport и width после изменения размера диаграммы.При этом div, в котором находится SVG, также может выходить за границы экрана, добавляя полосу прокрутки.

ПРОБЛЕМА

Если я сейчас попытаюсь перетащить свой rect, он выдаст мне следующее сообщение об ошибке:

Игнорируется попытка отменить событие TouchMove с Cancellable = false, например, потому что прокрутка выполняется и не может быть прервана.

Я думаю, это потому, что событие прокруткина самом деле срабатывает, а не перетащить.Поэтому я попытался предотвратить прокрутку, но d3.event.sourceEvent.preventDefault() или d3.event.sourceEvent.stopPropagation() в событии dragstart ни к чему не привели.

При использовании опции просмотра Chrome Mobile в Dev Tools я все еще могу перетащить rect после прокрутки до конца направления перетаскивания.Но на моем устройстве Android он просто зависает при возникновении этой ошибки.

МОЙ КОД 

var sliderDrag = d3.drag()
        .on("start", function () {
            d3.event.sourceEvent.preventDefault(); 
            d3.select(this).style("stroke", "#f39200");
        })
        .on("drag", function (d) {

            //move the slider
        })
        .on("end", function () {
            //adjust the size of the SVG

        });

var sliderRect = g.append("rect")
                    .attr("class", "sliderRect")
                    .attr("x", 50)
                    .attr("y", 50)
                    .attr("width", 80)
                    .attr("height",80)

sliderDrag(sliderRect)
...