Плавающий клон не отображается в Chrome, если перетаскиваемый элемент содержит компонент chartjs - PullRequest
Новая
       81

Плавающий клон не отображается в Chrome, если перетаскиваемый элемент содержит компонент chartjs

0 голосов
/ 25 июня 2019

Код и ссылка для ссылки

https://codesandbox.io/s/vue-template-qoo66

Пошаговый сценарий

Я создаю панель управления, где каждая перетаскиваемая плитка сетки содержит график. Графики построены с использованием chart.js. Хотя я могу изменить порядок листов, перетаскивая их, плавающая опорная плитка перетаскиваемой плитки не отображается, если плитка содержит график chart.js. Это происходит только в браузере Chrome. Для браузеров Firefox и Edge это работает нормально.

Фактическое решение

Единственное найденное решение - скрыть график перед перетаскиванием.

Ожидаемое решение

Было бы замечательно, если бы я мог не прятать графики при перетаскивании тайлов.

Результаты для Firefox и Chrome показаны ниже. Мигающие глюки - это ошибка в инструменте записи экрана, не обращайте на это внимания.

Результат в Firefox67 (Arch Linux) firefox-vuedraggable-opt

Результат в Chrome74 (Arch Linux) Окно инкогнито без каких-либо расширений chome-vuedraggable-opt

Визуальные результаты для разных браузеров из примера доступны на CodeSandbox .

Оба результата были достигнуты с использованием Chrome74 и Firefox67, работающих на Arch Linux. У меня были те же результаты для Chrome в Windows, но я не могу подтвердить версию.

Я также пробовал Chrome75 для MacOS. Была показана плавающая плитка, однако она была смещена за пределы рамки страницы, когда диаграммы были включены.

Ответы [ 2 ]

1 голос
/ 28 июня 2019

Я хотел бы поблагодарить @OwenM за его время и помощь.После некоторого разговора с ним на странице репозитория Vue.Draggable Выпуск 664 он указал путь к правильному решению и решил некоторые последние проблемы, с которыми мы столкнулись.

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

Еще раз спасибо @OwenM, очень ценю это.Приветствия

1 голос
/ 26 июня 2019

Все, что я могу думать, это:

  • Вы используете forceFallback: true и определяете событие onStart в Sortable
  • В этом случае вы используете Sortable.ghost (элемент-призрак) и проверяете, есть ли внутри холст
  • Если это не так, то графика там нет. Если это так, вы можете проверить, является ли он пустым, используя один из методов, описанных здесь: Как проверить, является ли холст пустым?
...