Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Share your creations! 👩‍🎨 #1109

Open
alexreardon opened this issue Feb 13, 2019 · 43 comments
Open

Share your creations! 👩‍🎨 #1109

alexreardon opened this issue Feb 13, 2019 · 43 comments

Comments

@alexreardon
Copy link
Collaborator

alexreardon commented Feb 13, 2019

We would love to see what you have been building with react-beautiful-dnd

Simply respond to this issue!

Things that would be useful:

  • a screenshot or gif
  • a link to your product/tool if there is one
@alexreardon
Copy link
Collaborator Author

Previous list: #164. I closed that issue a while ago, and rather than resurrecting it I thought why not have a new list!

@yusufameri
Copy link

yusufameri commented Feb 16, 2019

Hi @alexreardon! I have made a mobile/online version of cards against humanity called cardiparty.co. react-beautiful-dnd has been a crucial library in order to make this web app feel native on users mobile browsers!

I just have concern. A lot of my beta users on iOS (iphone) have complained that the touch sensitivity is very poor and at times they cannot drag elements to work. Is there some known issue with this? I am able to get dragging to work for the cards in my game on iphones but the experience is hit or miss (mostly miss) for most ios users and this is preventing my app from being functional for them.

@sarod
Copy link

sarod commented Feb 22, 2019

A codesandbox of a re-orderable Material-UI List using beautiful-dnd

@alexreardon
Copy link
Collaborator Author

A codesandbox of a re-orderable Material-UI List using beautiful-dnd

Looks great @sarod! Is there a way to include the edit icon in the draggable so it moves with the item?

@sarod
Copy link

sarod commented Feb 26, 2019

Looks great @sarod! Is there a way to include the edit icon in the draggable so it moves with the item?

The edit button is a child of the element passed to Draggable so I assumed this would be automatic. However it seems that material ui RootRef does not provide the ref to the ListItem root container that's what causes the issue. I'll try to look into it.

@AlithAnar
Copy link

Hello @alexreardon !

We are currently developing HeySpace app for team collaboration that mix slack and trello.

image

We are using react-beautiful-dnd in our boards, which sometimes contains lots of lists and tasks, therefore we need some kind of virtualization. The initial render can be very laggy.

@varHarrie
Copy link

Todoron, there are still many bugs.😆

image

@jpsear
Copy link

jpsear commented Feb 28, 2019

@AlithAnar Wow, HeySpace looks awesome. Nice job guys!

We are using beautiful-dnd on a user story mapping tool we created — Avion:

Avion User Story Map

Virtualisation is huge for us. We can have many droppable zones on a large map and this make dragging sluggish :(

@alexreardon
Copy link
Collaborator Author

Virtualisation is coming soon! #68

We have done a lot of prework for it

@uublive
Copy link

uublive commented Mar 8, 2019

hello everyone. First of all, beautiful-dnd is a very good piece of sofware :)
We are using it as one of the main elements of our enterprise task management solution called Boards

image

Boards is the enterprise version or our lighter consumer version Needful

I'm also looking forward for virtualisation. As I understand that it's already being developed by someone else, in the meantime I kind of 'cheated' implementing a fake virtualisation layer that enables us to work with really big kanbans.

Keep up the good work!
M

@alexlouden
Copy link

Just upgraded to v10.1 on a project I'm working on (the web version of Actions by Moleskine), thought I'd share a screen recording: https://vimeo.com/323033479

I've been sharing some of our progress over on twitter if anyone is interested :) https://twitter.com/alexlouden/status/1104010850216505344

@markdon
Copy link

markdon commented Mar 21, 2019

I made a component (MultiTree) based on @atlaskit/tree for rendering multiple lists with tree structures. This came about since @atlaskit/tree was almost perfect for what I was building, except it was only designed to have one Tree and dragging between different Tree components wasn't possible.

MultiTree demo!
Edit MultiTree

There's a few interactions that are a bit weird and I need to look into, but I'm liking how this is going!

I'm also aiming to add list dragging, scrolling inside the lists instead of the whole board (#131 ) and lazy loaded cards or virtualisation (#68 )

@ngyikp
Copy link

ngyikp commented Mar 29, 2019

Not my creation, but I know that Facebook's Gaming Streamer Dashboard uses react-beautiful-dnd :)

Screen Shot 2019-03-29 at 10 38 35 PM

@alexreardon
Copy link
Collaborator Author

Super cool @ngyikp. Thanks for the share!

@suanmei
Copy link

suanmei commented Jul 18, 2019

@AlithAnar Your page is really beautiful, which UI library are you using?

@AlithAnar
Copy link

AlithAnar commented Jul 18, 2019

@AlithAnar Your page is really beautiful, which UI library are you using?

We've made it from scratch, no UI library was used. Thanks for your kind words :)

@xuxuzhang1994
Copy link

MultiTree

hi Do you have any mature projects to see?

@markdon
Copy link

markdon commented Aug 8, 2019

@xuxuzhang1994 This didn't get completed :( #131 means rbd doesn't quite fit our requirements and we have an implementation that behaves more like trello and doesn't support dragging sub-items 😭.

@xuxuzhang1994
Copy link

@

@ xuxuzhang1994这没有完成:( #131意味着rbd不太符合我们的要求,我们的实现更像trello,不支持拖动子项😭。

@ xuxuzhang1994这没有完成:( #131意味着rbd不太符合我们的要求,我们的实现更像trello,不支持拖动子项😭。

Your creations has helped me a lot. Thank you.

@alexreardon
Copy link
Collaborator Author

alexreardon commented Oct 10, 2019

It turns out slack is using rbd

slack-reordering

https://slack.com/libs/desktop

Screen Shot 2019-10-11 at 8 41 04 am

@justrealmilk
Copy link

justrealmilk commented Dec 5, 2019

I use it to allow users of Braytech, a third party community tool for Bungie's Destiny 2 action mmo, to customise their default view, Now.

I've broken out different pieces of content into modules which can be rearranged.

Braytech.org

braytech org_1_4611686018449662397_2305843009260574394_now_customise (1)

braytech org_1_4611686018449662397_2305843009260574394_now_customise

I only use the required onDragEnd handler, and it's my first time, but it's been super cool and easy to do something like this with react and react-beautiful-dnd ✨

@alexreardon
Copy link
Collaborator Author

Great UI design @justrealmilk

@munkhjin0223
Copy link

munkhjin0223 commented Dec 27, 2019

Hey folks! We are working on an open-source project "Erxes". In a Sales Pipeline feature, we are using this package. This is an awesome and unique package while working apps like Trello. Thanks @alexreardon

Deal

@castroCrea
Copy link

Hello,

Did someone tried to do a calendar with react-beautiful-dnd or a time table ?

@jcrucesdeveloper
Copy link

Hey guys, I am developing this by my own. If you want more information don't hesitate on contact me :)
hello

@moubi
Copy link

moubi commented Mar 11, 2020

Hi folks.

I have been using rbd in two work projects successfully. What I really like about it is the easiness of having all the drag&drop logic contained within a single component.

Now I decided to give it a go for one of my personal apps.
I called it FlowTask - simple yet interactive task board for your mobile browser.

flowtask_preview

So far It's used for my daily task management on iPhone SE.

Some of the challenges I faced:

  • dragging between columns while horizontal scroll is disabled otherwise
  • dragging contentEditable elements
  • disable drag on Space press
  • dragging together with swiping interactions

Thank you @alexreardon and all contributors for maintaining this package.

@mindbet
Copy link

mindbet commented May 3, 2020

rankchoicevoting_screen

Here's the link:
https://mychoices.vote/democratic-primary-2020

@dev-assassin
Copy link

dev-assassin commented Jun 23, 2020

@alexreardon
can i use both of vertical and horizontal drag and drop at the same time in one component?
I tried to find the correct package, but i couldn't find them.
as seeing your package, i think it's possible to use them.
please let me know if you developed that feature.

and in horizontal case, how can i limit the number of items?
for example, i'd like to put 3 items in one horizontal zone.
in this case, there is API for this?

@lukasbach
Copy link

Hi! I've used rbd in my open source notebook app Yana

yana-dnd-demo

rbd is used for reordering tabs and for structuring note items. Yana allows you to structure notes in a hierarchical tree view, so you can drag and drop items from one location to another, or just reorder notes within one parent. Yana is highly scalable due to a SQL core, and offers lots of features. You can check it out at yana.js.org!

@2stash
Copy link
Contributor

2stash commented Nov 24, 2020

I just build a simple app that helps you schedule your algorithm studies.

algoschedule

@icaroscherma
Copy link

Fee Spreadsheet Calculator with multiple phases for an Engineering ERP Software:
WhatsApp-Video-2020-12-04-at-427

I couldn't get it to work moving to a different phase using a keyboard yet. 😞

@kodgurkini
Copy link

drop_comment_darkmode

Tab management tool, tabExtend(https://www.tabextend.com). Such a joy working with this lib, keep up the good work.

@clentfort
Copy link

I'm building a very simple "tree-editor" over at https://github.com/clentfort/react-beautiful-tree-editor to learn/scratch my own itch.

image

@guillermodlpa
Copy link

guillermodlpa commented Mar 29, 2021

Hi there!

I've been implementing https://usequatro.com with react-beautiful-dnd. It's been wonderful. Its accessibility and touch screen support are fantastic. I've pushed its boundaries a little though, using it for general drag and drop to a calendar view as well. More detail below.

Simple drag and drop of tasks within a list:

Kapture 2021-03-29 at 15 01 09

Dragging into a drop area called Backlog that performs a different action. Only appears while dragging:

Kapture 2021-03-29 at 15 02 31

Dragging a task from the list view into a calendar view droppable, to create an event for the task:

Kapture 2021-03-29 at 15 03 43

Dragging the event on the calendar view to change its time:

Kapture 2021-03-29 at 15 04 54

I'm doing some tricks for the integration between list and calendar, like using a custom placeholder event and manipulating a bit the styles passed in draggableProps. If there was interest in seeing how I've made it, I'd be happy to put together an open source example.

And it works as well on touch screens! 👏 Thank you react-beautiful-dnd team & contributors ♥️

Source code: https://github.com/usequatro/quatro-web-client

EDIT 2022-05-10: code needed to be made private again until discussing a few things with other teammates. Will be made open source soon.

EDIT 2022-07-17: code is open sourced again.

@darrikonn
Copy link

darrikonn commented Nov 4, 2021

Hi there!

We created eloroom using react-beautiful-dnd. It's a platform to create elo-rated competition in any kind of sport or activity. Suitable for workplaces/group of friends to boost morale and strengthen relationships :).

dnd

Absolutely love react-beautiful-dnd. I've one issue though with it which I'm trying to sort out: auto-scrolling doesn't work on mobile browser using touch (similar issue: #2003). It works flawlessly on desktop 🤔

Anyway, thanks for this awesome library!

@100terres
Copy link
Contributor

100terres commented Feb 25, 2022

I had fun at work building a sidebar with tree support using rbd 🙂 I also forked rbd to give this project a second life. Here's a blog post about it 🙂

UgnInUu.-.Imgur.mp4

@skychavda
Copy link

Hey @guillermodlpa, I am trying to implement similar to what you've done and I try to debug your product as well but didn't find that drag functionality so can you help me with your code. That's how you've done this stepwise dragging.

Thank you.

@guillermodlpa
Copy link

guillermodlpa commented May 5, 2022

Hello @skychavda! I'm glad you found the interaction valuable and you are trying to implement a similar one! We've recently decided to discontinue the project of Quatro, and so we've opened up the codebase for others to learn from. You can check out the code to understand the implementation: https://github.com/usequatro/quatro-web-client. As you'll see, I made a few tricks to get this result. In my opinion, the implementation is too complex to be sustainable, but it works, and I didn't find any other drag and drop library that offered the same smooth interaction both in desktop and mobile. If you have more questions, feel free to open a GitHub issue on that repository.

EDIT 2022-05-10: code needed to be made private again until discussing a few things with other teammates. Will be made open source soon.

EDIT 2022-07-17: code is open sourced again.

@skychavda
Copy link

Thank you @guillermodlpa for your support. I will keep in touch with you for any kind of help.

@linkb15
Copy link

linkb15 commented Jul 3, 2022

image

We use it as a tool to reorder our list 👍🏻 for our website at https://remoter.id

@Raasik007
Copy link

image

Hi, Team how to stop x axis drag allow only to drag y axis any idea or sample code....

@synapse
Copy link

synapse commented Nov 27, 2023

Hey everyone. First of all, thank this library!
I am using it all around the app. It was my main dnd library for the board but eventually I had to change it since it would not support nested draggables, but it is still used on every other draggable components.

intro.1.mp4

you can try it out at: https://getstacksapp.com/

@Subhwebninjaz
Copy link

Subhwebninjaz commented Aug 13, 2024

@alexreardon
Hi I am facing an issue , My scenario is little complex . Working in Next js.
if you see the attached screenshot

Depth 0 question is : Do you have Card??
Depth 1 questions are : "Card Type ?" and "Card Company?"
Depth 2 questions are : "which Bank" and "CVV number"
Depth 3 question is : "Specify your bank"

Now in Depth 0(Root Level) I can easily reorder the questions also in Depth 1(Child Level) I can easily reorder the questions with the help of react-beautiful-DND but after child level I mean after depth 1 in Any depth i am not able to reorder the questions or items with DND .
Screenshot 2024-08-09 at 6 19 13 PM

Getting wrong destination in when i tried to reorder nested child from depth 2 , but perfectly working in depth 1.
const onDragEnd = (result) => {
const { source, destination } = result;
console.log(source, destination)
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests