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

Question

Код и окно ссылки

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

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

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

Актуальное решение

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

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

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

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

Результат в Firefox67 (Arch Linux)

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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