trello-clone | A remake of Trello in React | Frontend Framework library

Your question is quite ambiguous but I guess you probably are confused about this thing:

Add hidden_field for board_id like:

Your component need a argument to which is a define url for a define in your router.

In your example, it seams like you are trying to access a js file, using a relative path, but this is not how react-router-dom works.

Try replacing with :

Ok guys I fixed it. The bug came from styled-components The bug was related to this part of the docs:

https://www.styled-components.com/docs/basics#coming-from-css

"Define Styled Components outside of the render method"

At first the component looked like this:

I'd first assert_receive the raw message and then Poison.encode! and do a second assert:

Using jquery and jquery UI, I did something quite like this a while ago. I didn't create a "make new card" function, I began with a "launchpad" and created two droppable areas that cards could be appended to and switched between - similar to what you have. Using "intersect" as I remember was a tipping point to getting it to work as I wanted - being able to move elements up and down the list (so they don't necessarily move back to where they originated). Perhaps it could be a starting point for you? Here's the fiddle (the jquery is old.. recommend updating to newer versions)

Hope this helps.

EDIT: I made a couple of small tweaks to your code to add an outline and change the cursor on move. According to a comment on another question, adding a border is the most efficient way to create the visual 'outline' effect. There is a longer way to create the 'sortable' effect which is demoed in this codepen I found, and explained simply, the function is based around calculating hover position and if the dragged element is half-way over an item in the list, the effect displays and the item can be dropped in between list items.

Hope this is clear enough!