[reagent] react-beautiful-dnd question

[Boris Kourtoukov]

I am trying to translate this Beautiful Drag and Drop's simple example: https://github.com/atlassian/react-beautiful-dnd/blob/master/stories/src/simple/simple.jsx

Everything works well until I get into the inner "Draggables", what is the appropriate way to write the following in Reagent: https://github.com/atlassian/react-beautiful-dnd/blob/master/stories/src/simple/simple.jsx#L79-L87

Specifically the `:ref` fields seem to not function as expected if I just do `(aget droppable-provided "innerRef")`

As an aside has anyone had any luck with Beautiful Drag and Drop?

Also if someone hasn't seen it yet, this is a super helpful tool for larger JSX components: https://github.com/madvas/jsx-to-clojurescript

Thanks!

[Reefersleep]

Hello Boris

I'm trying to use the same lib. I'm almost there :)

I don't have any problems with the innerRef, not that I know of, anyway. My problem is getting the "placeholder" React elements into the right places, with the right React->Reagent->React interop conversions.

To be clear, I'm just doing (.-innerRef provided) to get the ref.

My current state is; I've got elements lined up, being draggable, elements move out of the way for each other, and they are swapped upon drop (as I want them to). However, the first time I drag over another element, the surrounding container shrinks to fit all the elements minus the one I'm dragging, meaning that the ones that are moving out of the way are overlapping others. I'm pretty sure this is because I don't have the placeholder set up properly.

Let me know if you made any progress, or if you're still working on it. Maybe we can help each other out :)

[Boris Kourtoukov]

I ended up quickly prototyping my own drag and drop solution (only needed a rough mockup at the time) so haven't went further with it.

Is there a minimal gist I could test out? I wouldn't mind getting this worked out in case I need it in the future.

Best,

Boris

[Søren Knudsen]

Hello Boris

My work in progress is pretty minimal, though buried underneath a bunch of other code :) It is devcards project: https://github.com/Reefersleep/cards-for-fast-cities
Look in
/src/cards_for_fast_cities/core.cljs

in "(defcard-rg drag-and-drop", line 439.

The project can be run with "lein figwheel" and by navigating to http://localhost:3449/cards.html#!/cards_for_fast_cities.core in a browser.

How about your work, is that publicly accessible? I was contemplating doing a port or a reduced version for cljs myself. I fear it's too big a task to fit my brainspace/spare time, so I'm very curious to see your take on it.

Kind regards

Søren

--
Note that posts from new members are moderated - please be patient with your first post.
---
You received this message because you are subscribed to the Google Groups "ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email to clojurescript+unsubscribe@googlegroups.com.
To post to this group, send email to clojur...@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.