reagent - drag/drop?

[ritchie turner]

Hi Dan

How would you recommend dealing with drag/drop in reagent?

I probably want to use the goog.fx.DragDrop functionality and move nodes between parents (components)

However, reparenting like this seems like a great way to confuse react

(defn- ondrop [event]
(let [ti (.-element (.-dropTargetItem event))
si (.-element (.-dragSourceItem event))]
(set! (.-background (.-style ti)) "silver")
(dom/append ti (dom/removeNode si))))

rather I should be update the atom appropriately and redraw the component with a new node or not, which means the component needs to know that there are items to be rendered that won't be there to start with and so on. Seems a bit more complicated.

Thanks

Ritchie

[Dan Holmsand]

Yes, React really doesn't want you to mess with its DOM nodes (and if you do, you have to make sure that they are not re-rendered by React, otherwise horrible things will happen).

The cleanest way to handle drag-and-drop is probably to change your "model" (i.e some state in an atom) when the drop event is triggered, so that some content is rendered in a new place rather than in the old.

I don't have any direct experience from goog.fx.DragDrop, though, so I can't say for sure how easy it is to adapt to a non-DOM-centric model like React's.

/dan

[rit...@async.cl]

Ok, makes sense, thanks.

[rit...@async.cl]

I have a reagent tab container, now, let's say i want to run some non reagent/react dom nodes as a page of the container, is that possible?

Then I could use reagent for structuring the ui for most of the ui, then switch it off, e.g. if I want to have a game in that part of the dom. Then I could do my drag/drop with impunity in that part of the dom.

Thanks for any info.

Ritchie

On Tuesday, February 18, 2014 3:40:30 PM UTC-3, Dan Holmsand wrote:

[Dan Holmsand]

Well, as long as a Reagent component doesn't re-render (because it receives different arguments, an atom changes, etc.), it doesn't cause React to touch the DOM node it generates at all.

So, for example if you have a component like this:

(defn empty-node []
[:div#empty-node-id])

the div will only be rendered once, and React won't mess with the div's children, so you're free to do whatever you like with them (as long as empty-node is around, of course).

/dan

> --
> Note that posts from new members are moderated - please be patient with your first post.
> ---
> You received this message because you are subscribed to a topic in the Google Groups "ClojureScript" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/topic/clojurescript/zxDk-DKc7Z0/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to clojurescrip...@googlegroups.com.
> To post to this group, send email to clojur...@googlegroups.com.
> Visit this group at http://groups.google.com/group/clojurescript.