React-dnd: Вопрос: Как сделать квадратные углы прозрачными при перетаскивании элемента с закругленными углами?

Вы используете CustomDragLayer для DragPreview? Появляются квадратные углы
вместе с более круглыми?

Снимок экрана должен помочь увидеть, что происходит.

В среду, 7 июня 2017 г., в 00:53 nottoseethesun [email protected] написал:

У меня есть перетаскиваемый элемент с закругленными углами, и когда его перетаскивают,
квадратные углы элемента отображаются светло-серым цветом, разные
от назначенного цвета фона элемента.

Я бы хотел, чтобы это исчезло, поэтому просто элемент с закругленными углами
появляется.

Есть ли что-то, что можно сделать, чтобы это отключить? Как с призраком
изображение, которое может быть применено?

-
Вы получаете это, потому что подписаны на эту ветку.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/react-dnd/react-dnd/issues/788 или отключите поток
https://github.com/notifications/unsubscribe-auth/AA_31sMofYE49RWrSM0SvEiSJEIK9TOBks5sBacZgaJpZM4NxzBj
.

>

С уважением,
Гаган

Спасибо - не использую CustomDragLayer ; все просто.

На скриншоте это, к сожалению, невозможно, но я могу описать лучше: перетаскиваемый элемент представляет собой квадратный блок размером около дюйма с каждой стороны с закругленными углами (радиус границы 10 пикселей). Перетаскиваемый элемент при перетаскивании выглядит нормально во всех отношениях (он по-прежнему имеет закругленные углы и правильный цвет), за исключением одного: также появляется каждый из четырех неокругленных углов, как если бы на элементе не было закругления радиуса границы, за исключением того, что цвет неокругленной части - это цвет родительского элемента перетаскиваемого объекта (родительский элемент, из которого он был перетащен). Таким образом, каждый закругленный угол, к сожалению, сопровождается только в браузере Chrome (не в Firefox или Safari) маленькой «шляпкой», которая представляет собой остальную часть поверхности div, как это было бы без закругленных углов.

Это похоже на то, как если бы Chrome делал снимок div и удерживал его в памяти. Раньше с этим у меня действительно была проблема с endDrag и когда я щелкал за пределами веб-браузера на рабочем столе, я мог видеть перетаскиваемое, как описано.

Я попытался установить WebkitTapHighlightColor (формат идентификатора React) на transparent , но это не помогло.

Это странно. Если вы не используете CustomPreview, то точно такой же
объект, отображаемый до того, как вы начнете перетаскивать, должен быть предварительным просмотром (как мы
быть в зависимости от снимка элемента в браузере)

Не могли бы вы проверить, делаете ли вы что-то еще, кроме того, что описано в
этот пример -
http://react-dnd.github.io/react-dnd/examples-drag-around-naive.html ?

Если вы клонируете это репо и добавите в этот пример borderRadius, вы увидите
он работает отлично!

В среду, 7 июня 2017 г., в 09:19 nottoseethesun [email protected] написал:

Спасибо - не используете CustomDragLayer; все просто.

На скриншоте, к сожалению, это невозможно, но я могу описать
лучше: перетаскиваемый элемент представляет собой квадратный блок размером около дюйма с каждой стороны, с
закругленные углы (радиус границы 10 пикселей). Перетаскиваемый, когда перетаскивается, выглядит
нормальный во всех отношениях (все еще имеет закругленные углы и правильный цвет)
за исключением одного: каждый из четырех неокругленных углов выглядит как
ну, как если бы на элементе не было закругления радиуса границы,
за исключением того, что цвет неокругленной части совпадает с цветом родительского
элемент перетаскиваемого объекта (родительский элемент, из которого он был перетащен). Так
к сожалению, каждый закругленный угол сопровождается только в браузере Chrome (не
Firefox или Safari), с небольшой "шляпкой", которая является остальной поверхностью
область div, как если бы она была без закругленных углов.

Это похоже на то, как если бы Chrome делал снимок div и удерживал его в
объем памяти. Раньше с этим у меня действительно была проблема с endDrag и когда
Я щелкнул на рабочем столе вне веб-браузера, я увидел
перетаскивается, как описано.

-
Вы получили это, потому что прокомментировали.

Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/react-dnd/react-dnd/issues/788#issuecomment-306678795 ,
или отключить поток
https://github.com/notifications/unsubscribe-auth/AA_31vIjJk8QhGycVd78dYB1EWa_El_nks5sBh3igaJpZM4NxzBj
.

>

С уважением,
Гаган

Спасибо - я попробовал border-radius в этом примере, и вы действительно правы. Однако причина, по которой это выглядит правильно, заключается в том, что вся рабочая область имеет один и тот же цвет фона. Когда собственное призрачное изображение html-элемента в Chrome перетаскивается на другой цвет фона, эти углы появляются. В моем случае такая ситуация есть. Это можно успешно обойти, указав фантомное изображение.

Пробежался по этой же проблеме. В конечном итоге удалось исправить это, добавив transform: 'translate(0, 0)' в узел, который я хотел использовать в качестве предварительного просмотра перетаскивания. Получил некоторую информацию на этой странице: https://kryogenix.org/code/browser/custom-drag-image.html, поскольку она показывает примеры, где углы есть, а где они ушли.

@douweknook, спасибо за это. Поиск решения занял много времени.

@douweknook отличное решение!

Простая реализация css будет выглядеть примерно так:

    .sortable-chosen {
        transform: translate(0, 0);
    }

Я бы связал .sortable-selected с классом сортируемого элемента, чтобы гарантировать, что стиль не применяется глобально. Например, если класс сортируемого элемента - «item», используйте вместо него .item.sortable-selected!

@douweknook YAY ....... спасибо, он решил проблему даже в чистом javaScript tank, вы

@douweknook Вы джентльмен и ученый. Это сработало для исправления проблемы с радиусом границы, но все еще обрезает тень блока. Примечание: это правильно работает в Firefox.

Я создал для этого отдельный выпуск, всем желающим. https://github.com/react-dnd/react-dnd/issues/2762