React-dnd: Кто использует React DnD?

• Проект: https://github.com/WikiEducationFoundation/WikiEduDashboard
• Полезность: Очень
• Проблемы: Анимация, управляемая состоянием, была самой сложной частью. Я закончил с комбинацией групп перехода react-motion и react css. Затем мне пришлось управлять дополнительным состоянием для вещей, которые находились в середине анимации, чтобы они не становились мишенями для перетаскивания во время анимации. В итоге я использовал https://github.com/yahoo/react-dnd-touch-backend , у которого были свои проблемы (текст выбирался во время перетаскивания), но была более контролируемая _во время_ анимации. Я, вероятно, потратил около 4 рабочих дней на эту функцию и правильную анимацию, что, вероятно, заняло бы значительно меньше времени в нереагирующем приложении.

_- В каких продуктах вы используете React DnD?_

Я использую его в различных приложениях (канбан-доска, линейка бизнес-приложений).

_- Насколько это полезно для вас?_

До React DnD я перепробовал все DnD-решения, которые смог найти, как на основе React, так и на основе jquery, и React DnD выходит далеко вперед.

_- Как часто у вас возникают с этим проблемы и насколько они вас расстраивают?_

Начиная с 1.0, я не сталкивался с какими-либо проблемами. Стоит отметить, что я поддерживаю только современные браузеры в своих продуктах.

_- Какие функции вам интересны?_

Я использую все функции в разных комбинациях в разных областях.

_- Можете прикрепить пару скриншотов вашего продукта?_

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

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

В каких продуктах вы используете React DnD?

Мы используем его в нашей новой веб-консоли в Treasure Data. Я также использовал его для личных проектов.

Насколько полезным вы считаете это?

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

Как часто у вас возникают проблемы с этим, и насколько они разочаровывают?

Каждый раз, когда я использую библиотеку, мне требуется некоторое время, чтобы вспомнить, как все это объединяется: куда идет каждая часть и что она делает. Это происходит даже после многократного использования.

Возможно, наличие визуализации, показывающей все части, облегчило бы запоминание.

В целом, похоже, что библиотека делает все, что мне нужно.

Какие особенности вас волнуют?

Тестируемость! Мой предыдущий опыт работы с перетаскиванием был довольно плохим, и никто не тестировал их код, связанный с перетаскиванием.

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

Я видел react-dnd-touch-backend , но не знаю, как бы их смешать.

Можете ли вы прикрепить пару скриншотов вашего продукта?

https://gfycat.com/ScientificEvilAmericanbadger

Это в основном просто я играю. react-dnd упрощает реализацию зоны перетаскивания файлов.

В каких продуктах вы используете React DnD?

codecks.io все еще находится в разработке, но близок к раннему доступу

Насколько полезным вы считаете это?

Много. Нормализация поведения браузера и предложение реагирующего подхода к dnd делают эту библиотеку легкой задачей для меня.

Как часто у вас возникают проблемы с этим, и насколько они разочаровывают?

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

Какие особенности вас волнуют?

Нормализация браузера, поддержка сенсорного взаимодействия

Можете ли вы прикрепить пару скриншотов вашего продукта?

https://gfycat.com/CleanLegitimateAracari

Я использовал React DnD в своей докторской работе над поисковой системой для архивов медицинских изображений. Это позволяет мне перетаскивать результаты поиска, чтобы они стали частью запроса (получая похожие изображения). Если бы не было такой библиотеки, мне пришлось бы возиться с API HTML5 и убедиться, что он хорошо работает вместе с React. Все, что позволяет мне сосредоточиться на более важных делах, — золото!

У меня не было серьезных проблем, но переход с 0.x на 1.x был очень запутанным и был хорошим примером неправильного использования тегов dist (1.0.0-rc был выпущен как latest без обновлений). документация). В любом случае, это все вода под мостом. :)

Версия 1.0.0-rc была выпущена последней без обновленной документации.

Да, это было до того, как я узнал, как работают dist-теги. :радость:

В каких продуктах вы используете React DnD?

Использование его для клиентского проекта, в котором много взаимодействий перетаскивания. Некоторые из примечательных компонентов:

• Древовидное представление, в котором вы можете сортировать и вкладывать узлы
• Список/карточка, аналогичная Trello, поддерживает только сортировку.

Это также инструмент для совместной работы, поэтому большинство обновлений интерфейса отправляются на сервер сокетов.

Насколько полезным вы считаете это?

Очень полезно, очень легко отделить логику перетаскивания от вашего компонента и протестировать ее по отдельности.

Как часто у вас возникают проблемы с этим, и насколько они разочаровывают?

Мы сталкиваемся с множеством проблем с древовидным представлением, которое поддерживает вложение и сортировку,

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

У нас есть разные типы узлов (папки, списки). Пользователь может либо поместить что-то в папку, что приведет к ее вложению, либо отсортировать его ниже или выше другого узла. Это взаимодействие сопровождается частым мерцанием, некорректным поведением и иногда снижением производительности. Смотрите это видео: http://s.2to1.be/fAtX ,

Принцип работы следующий:

1. Пользователь начинает перетаскивать узел, узел остается на своем месте
2. Пользователь наводит курсор на узел -> отображать индикатор новой позиции, позиция этого отправляется с помощью избыточного действия. (все дерево является частью состояния приложения).
3. Пользователь завершает перетаскивание, которое отправляет действие, которое сохраняет новую позицию узла на сервере и передает ее всем подключенным клиентам сокетов.

В настоящее время мы используем некоторую математику (разновидность сортируемого примера в этом репозитории), чтобы вычислить, находится ли узел в папке или под ней или над ней. Сначала я попытался сделать компонент Folder DropTarget , но это не сработало, потому что я не смог отсортировать остальные Node DropTarget

Какие особенности вас волнуют?

• Тестируемость
• Отключение бэкэндов
• Подключаемся к событиям
• Поддержка браузера

Можете ли вы прикрепить пару скриншотов вашего продукта?

Смотрите видео выше

Я только что добавил react-dnd на прошлой неделе в образовательное веб-приложение (еще не выпущенное). Это потрясающе! Большое спасибо за вашу работу!

Самый большой выигрыш, IMO, заключается в том, что react-dnd обеспечивает правильный уровень абстракции для управления функциями DnD во всем приложении.

Помимо возможности отказаться от неуклюжей комбинации изолированных, универсальных компонентов перетаскивания (сортируемых и т. д.), я смог добавить некоторые функции перетаскивания за считанные часы, которые я ранее списывал как слишком сложные. чтобы оно того стоило (например, перетащите карту для повторной сортировки в ее списке ИЛИ на значок списка пользователей, чтобы отобразить список пользователей, а затем перетащите ее на соответствующего пользователя).

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

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

Если говорить лично о том, почему я не делаю пул-реквесты для проектов с открытым исходным кодом (во всяком случае, пока)... Я дизайнер. Хотя я использую этот инструмент, например, моя голова, естественно, думает о самых разных проблемах. Помимо того, что я просто не умею решать проблемы, возникающие в подобных библиотеках, это действительно не та работа, которую я обычно делаю, и я бы не «доверял» своему решению. Я знаю, что в этом есть некоторая доля эгоизма, но я полагаю, что многие дизайнеры, которым также довелось писать код во фронтенд-разработке, действуют таким образом. Я очень благодарен таким людям, как вы, которые готовы помочь таким дизайнерам, как я, с инструментами, которые приводят сложности разработки приложений в более тесное соответствие со сложностями дизайна продукта, чтобы перемещение между областями было менее неприятным.

К вашему сведению, я использую react-dnd в сочетании с react-flip-move для анимации изменений макета. Прошло всего несколько дней, но они, кажется, отлично сочетаются друг с другом.

@арстин

Это полностью сделало мой день. :сердце:

_В каких продуктах вы используете React DnD?_
Продукт все еще находится в секрете.

_Насколько это полезно для вас?_
Очень полезно, у нас есть много типов перетаскивания. Сохранение логики DnD внутри компонентов помогло нашему мозгу справиться со всей сложностью.

_Как часто у вас возникают с этим проблемы и насколько они вас расстраивают?_
У нас есть некоторые проблемы с производительностью из-за огромного количества регистрируемых целей перетаскивания. В остальном работает отлично!

_Какие функции вам интересны?_
Производительность и совместимость с SVG.

Можете ли вы прикрепить пару скриншотов вашего продукта?
Не полностью, но это даст вам представление о проблеме, которую мы пытаемся решить с помощью React-DnD.

Приложение работает как редактор карт для стратегических игр. Вы можете перетаскивать новые элементы на карту в соответствии с рядом правил, а также перемещать элементы по карте. Мы не создаем онлайн-игру, вместо этого используем некоторые идеи для решения других проблем с отображением (опять же, я пока не могу упомянуть).

Большое спасибо за прекрасную библиотеку!

Это спасает жизнь, если вы используете реакцию и должны делать что-то dnd. Отличная работа!

Я использую React DND в нашем ПО для управления транспортом . пока у меня вообще не было проблем.

пользователь перетаскивает остановки доставки и видит их прямо на карте с рассчитанными расстояниями.

В каких продуктах вы используете React DnD?

CMS на основе блоков с функцией перетаскивания (еще одна внутренняя бета-версия, запуск для клиента в апреле)

Насколько полезным вы считаете это?

Безмерно. Хотя API не так прост, как некоторые другие сторонние компоненты, он очень мощный и действительно позволяет вам делать все, что вам нужно.

Как часто у вас возникают проблемы с этим, и насколько они разочаровывают?

Редко и не сильно раздражает.

Какие особенности вас волнуют?

Стабильность и кроссбраузерность.

Можете ли вы прикрепить пару скриншотов вашего продукта?

В каких продуктах вы используете React DnD?

Мы используем React DnD в веб-приложении Asana для всех мест, где мы используем перетаскивание. Обратите внимание, что в настоящее время мы переписываем наше приложение с нашей внутренней среды Luna на React и используем React DnD во время перезаписи во всех местах, где мы используем перетаскивание.

Насколько полезным вы считаете это?

Мы нашли это очень полезным. С API легко работать, и он позволяет нам иметь четкое разделение задач, сохраняя перетаскивание внутри нескольких компонентов.

Как часто у вас возникают проблемы с этим, и насколько они разочаровывают?

За исключением первоначального запуска, у нас не часто возникают проблемы с ним. Мы используем React DnD с TypeScript, и я думаю, что написание определений типов сократило для нас период разгона (поскольку нам пришлось исследовать весь API в процессе). Теперь наши проблемы в основном связаны с тестированием (например, очистка между тестами, внутренние помощники для работы с компонентами, украшенными dnd, и так далее). Иногда это расстраивает, но не так сильно теперь, когда у нас есть несколько компонентов общего назначения, которые можно использовать, или компоненты-примеры, на которых можно основывать будущие.

Какие особенности вас волнуют?

Производительность, разделение задач, тестируемость

Можете ли вы прикрепить пару скриншотов вашего продукта?

@epelz Вам, вероятно, следует попросить асану спонсировать его, иначе проект замедлится.

либо https://github.com/Asana , либо https://github.com/FogCreek , которые делают Trello, который определенно использует react-dnd, могут быть отличными спонсорами.

@gaearon еще лучше, чтобы Facebook спонсировал его

В каких продуктах вы используете React DnD?

Следующее поколение нашего пользовательского интерфейса.

Насколько полезным вы считаете это?

Очень сильно! Мне нравятся документы, но можно было бы использовать больше примеров из реального мира.

Как часто у вас возникают проблемы с этим, и насколько они разочаровывают?

Только что столкнулся с проблемой при украшении компонента с помощью DragSource, которая препятствует выполнению метода componentWillUpdate при изменении реквизита. Супер расстраивает, поэтому я думаю, я должен зарегистрировать ошибку. Хотя я предполагаю, что это я, а не ты. ;)

Какие особенности вас волнуют?

Производительность, стабильность и сенсорная поддержка.

Можете ли вы прикрепить пару скриншотов вашего продукта?

Боюсь, еще нет, но подумайте о списках с переупорядочением и перетаскиванием в них вещей из новых списков. Довольно просто по сравнению с другими примерами здесь.

В каких продуктах вы используете React DnD?

Мы в @teleport используем React DnD в нашем продукте Zen (перемещающийся контрольный список) для изменения порядка и классификации задач.

Кроме того, мы только что создали повторно используемый компонент древовидного представления react-dnd-treeview с поддержкой DnD, реализованной с помощью React DnD для использования в текущем внутреннем проекте. Сначала мы использовали react-ui-tree, но не смогли правильно настроить UX, и у нас был положительный опыт работы с React DnD, поэтому мы реализовали свой собственный. Компонент находится на очень ранней стадии, поэтому пока нет документации, CI и т. д., но любые отзывы будут приветствоваться!

Насколько полезным вы считаете это?

Хотя потребовалось некоторое время, чтобы понять модель, дизайн действительно чистый, и мы решили использовать его везде, где нам понадобится DnD. Итак, очень полезно.

Как часто у вас возникают проблемы с этим, и насколько они разочаровывают?

Пока у нас было 2 проблемы:

• правильное перетаскивание UX с сенсорным бэкендом (включая производительность)
• изначально я пытался реализовать логику области перетаскивания в JS, но застрял с невозможностью получить правильные координаты относительно цели (для определения, следует ли опускаться выше или ниже цели) из React DnD, в конце концов решил создать отдельные накладывающиеся элементы DOM как мишени для сброса.

Какие особенности вас волнуют?

Производительность, скрывающая причуды базовых браузеров/платформ.

Можете ли вы прикрепить пару скриншотов вашего продукта?

Телепорт Дзен:

реагировать-днд-дерево:

В каких продуктах вы используете React DnD?
Discord - https://discordapp.com - голосовой и текстовый чат для геймеров

Насколько полезным вы считаете это?
Очень!

Как часто у вас возникают проблемы с этим, и насколько они разочаровывают?
Нечасто, 5/10 разочаровывает.

Какие особенности вас волнуют?
Весь актуальный функционал.

Мы почти использовали react-dnd для настольного клиента Slack , но, к сожалению, столкнулись с двумя ограничениями, которые оказались нарушителями условий сделки:

1. Невозможно настроить логику перетаскивания (т. е. логику, которая вычисляет состояние перетаскивания, например, когда перетаскивание выполняется).
   
   
   
   • Очень легко изменить компоненты в ответ на изменение реквизита, введенного из состояния перетаскивания. Также довольно просто настроить предварительный просмотр перетаскивания с помощью специального компонента React. Но, к сожалению, данные, которые вы прикрепляете к операции перетаскивания, могут присоединяться только к курсору и следовать за ним. Это исключает пользовательский опыт, который мы сейчас имеем с нашей боковой панелью, где вы можете перетаскивать значки команд, чтобы изменить их порядок, и эти перетаскивания ограничены только осью Y. С помощью react-dnd вы можете легко ограничить предварительный просмотр перетаскивания одной осью, но невозможно ограничить данные, прикрепленные к курсору, при перетаскивании. Это означает, что если вы перемещаете курсор от боковой панели по горизонтали, но курсор все еще находится вертикально «над» целью перетаскивания, react-dnd вообще не позволит цели перетаскивания реагировать. (см. GIF ниже для поведения, которое мы в настоящее время имеем без react-dnd 👇)
     
     
   
   
2. Использование пользовательского слоя перетаскивания блокирует обычный цикл рендеринга React, если вы делаете что-то на hover . Поскольку вам нужно создать дополнительный компонент React, если вам нужен настраиваемый слой перетаскивания, и этот слой перетаскивания работает, изменяя свое положение в ответ на изменения props от мониторов dnd, render() в конечном итоге получает называется _a lot_. Это проблема только в том случае, если вы планируете повторно отображать любые другие компоненты (скорее всего, другие цели перетаскивания) на hover при перетаскивании DragSource. Нам удалось несколько смягчить это, изменив состояние на hover асинхронно и вернув ранний возврат при наведении, если цель перетаскивания не изменилась, но по-прежнему была заметная задержка при изменении целей перетаскивания во время наведения.

Надеюсь, этот отзыв будет полезен! Мне понравилось работать с react-dnd, когда я рассматривал возможность его использования в приложении Slack, и мне бы хотелось, чтобы он преодолел эти ограничения, если это вообще возможно.

В каких продуктах вы используете React DnD?

Мы используем его в tylio , новом способе создания веб-страниц. React-dnd находится в центре страницы, на которую вы загружаете свой контент.

Насколько полезным вы считаете это?

Очень полезно; Сначала немного сложно понять это, так как вам нужно понять все движущиеся части сразу, но как только это щелкнет, вы готовы к работе.

Как часто у вас возникают проблемы с этим, и насколько они разочаровывают?

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

Какие особенности вас волнуют?

Практически все! Мы используем различные типы источников перетаскивания и целей перетаскивания, нативные файлы / URL-адреса / текст, HTML5 и сенсорный бэкэнд с настраиваемым слоем перетаскивания.

Можете ли вы прикрепить пару скриншотов вашего продукта?

Если кто-нибудь использует его с Typescript, не могли бы вы привести базовый пример? Я застрял с этой ошибкой:

decorateHandler.js:13 Uncaught TypeError: Cannot call a class as a function

Я использую это следующим образом:

@DragSource(ItemTypes.IDEA,ideaSource,(connect:DragSourceConnector, monitor: DragSourceMonitor)=>{ return { connectDragSource:connect.dragSource(), isDragging:monitor.isDragging() }; })(Idea) export class Idea extends React.Component<IIdeaProps,{}>{...}

Я не знаю, может уже слишком поздно вмешиваться, но я хотел оставить отзыв (надеюсь, конструктивный).

Я обнаружил, что React-DnD несколько сложен для понимания (и реализации). В нем много движущихся частей, и его настройка довольно сложна. Я надеялся получить что-то более «подключи и работай». И, возможно, это потому, что он пытается делать много разных вещей (цели перетаскивания, переупорядочивание списка и т. д.). Но в конце концов я выбрал другой подход, который заключался в том, чтобы просто ставить кнопки вверх/вниз на каждый элемент и изменять порядок таким образом в сочетании с реакцией-переворотом-перемещением для анимации движения.

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

Мы начинаем использовать его в крупномасштабном проприетарном продукте, созданном с использованием React и Redux. Мы используем react-dnd для управления аспектами перетаскивания всех вещей, кроме элементов SVG в приложении. У него как раз правильный уровень абстракции. На самом деле, у нас есть что-то очень похожее для кода, предшествующего React, и оно поддерживается событиями мыши.

Единственное, что я хотел бы, чтобы у react-dnd был бэкенд, основанный на событиях мыши, чтобы он работал и с элементами SVG.

Кстати, я нахожусь в процессе написания для него определения типа потока на основе его определения TypeScript , поскольку существующее определение типа потока неполно.

Вау, много материалов! Это очень много данных, которые нужно пройти! Я собираюсь закрыть этот вопрос. Спасибо всем, что нашли время оставить комментарии!

Я планирую обновить часть документации в ближайшие несколько недель, и одна из моих мыслей — создать витрину для проектов и приложений, использующих React DND. Я создам дополнительный выпуск, чтобы зафиксировать эти проекты, когда я возьмусь за проект!

💜

@mnquintana Очень интересный отзыв — вы и ваша команда использовали другую библиотеку перетаскивания или просто создали что-то полностью с нуля?

@mnquintana было бы действительно здорово узнать, что вы сделали, чтобы преодолеть это, или, что еще лучше, заставить slack выпустить свою библиотеку dnd!

@epelz Нужна твоя помощь. Создали ли вы многоразовый компонент перетаскивания для перетаскивания карточек на приборной панели и элементов в списке или использовали отдельный компонент для карточек и списка. Я был бы очень признателен, если бы вы могли ответить.

Я знаю, что это довольно старая ветка обсуждения, но все равно хотел внести свой вклад. Эверноут
🐘 прямо сейчас использует react-dnd для нашего нового продукта Spaces для бизнеса! Мы многому научились и можем попытаться поделиться тем, что узнали, если людям это интересно :)

В каких продуктах вы используете React DnD?
https://evernote.com/бизнес

Насколько полезным вы считаете это?
Очень полезно! Это была крутая кривая обучения, но мы смогли сделать большую часть того, что хотели.

Как часто у вас возникают проблемы с этим, и насколько они разочаровывают?
Я чувствую, что есть некоторые большие барьеры для начинающих, и некоторые вещи интересны для решения. Некоторые ошибки, связанные с эффектами наведения и опускания, сильно сбили нас с толку, но при более подробном рассмотрении кажется, что некоторые из них являются просто ограничениями с собственной реализацией перетаскивания HTML5 (эффекты перетаскивания специально переопределяют курсор, который вы хотите применить, поэтому мы можем ' t использовать в своих интересах такие вещи, как cursor: no-drop , Это действительно умно, что вы сделали это, чтобы вы могли реализовать свои собственные серверные части, если это необходимо, и мы еще не отважились экспериментировать с сенсорным сервером.

У нас было интересное время, связанное с разрешениями. Наше перетаскивание заметок требует множества вещей, чтобы знать, можем ли мы что-то перемещать и/или бросать. Мы также обнаружили, что нам пришлось заново реализовать нативную функцию постепенного исчезновения и обратного перетаскивания в основной элемент DOM, когда она не нашла места, чтобы перетащить себя в наш CustomDragLayer (это может быть примером, который мы можем внести).

Какие особенности вас волнуют?
Мы хотим реализовать множественное перетаскивание, и, насколько нам известно, не похоже, что есть чистый способ сделать это с помощью React-Dnd? Однако мы больше изучаем это. Когда мы погрузимся глубже, мы поделимся больше.

@augbog не уверен, пробовали ли вы это, но изучили ли вы реализацию gaeron в первом сообщении в выпуске № 14 и использовали пользовательский слой перетаскивания?

В каком-то смысле этот сценарий уже возможен: потребители могут вручную отслеживать выбранные элементы, устанавливать для dragPreview некое универсальное изображение-заполнитель и соответствующим образом реагировать на удаление (насколько это касается бизнес-логики) нескольких элементов.

https://react-dnd.github.io/react-dnd/examples-drag-around-custom-drag-layer.html

Спасибо @ JM-Mendez, да, мы это видели, и мы были обеспокоены последующим комментарием о том, что несколько компонентов знают, что их перетаскивают, но после повторного прочтения это на самом деле может не повлиять на нас, поэтому мы все еще изучаем это :) Спасибо за призыв к этому!

По-прежнему нет бэкэнда для перекрестного DnD iframe или возможности перетаскивания родительского окна в дочерний iframe. @gaearon Я видел ваш комментарий по этой проблеме в нескольких темах, я хотел бы сказать, что это единственная причина, по которой мне пришлось использовать чистое решение js для моего проекта.

(Редактировать) Я думаю, что это действительно полезная функция для тех, кто пытается создать конструктор страниц с перетаскиванием.