`selector` - our element's id as a string prepended with "#"
`hook` - a reference to `this` that we'll use later `dragged` - the item currently being dragged Read more about JavaScript interoperability in the Phoenix LiveView documentation.Īt the beginning of our `mounted` lifecycle callback function we'll define three variables: This callback is called when the element we add this hook to has been mounted to the DOM and the server-side LiveView has also mounted. In this hook, we only need to implement `mounted`. We'll import `sortablejs` at the top and add an object that is our default export:Ĭlient hooks can implement a number of lifecycle callbacks. We're adding this on the client-side because the user experience is smoother than implementing it server-side within our `page_live.ex`.įirst, create a file within `assets/js` named `dragHook.js`. Now that we have our markup in LiveEEx, we can add the client-side javascript to implement drag and drop functionality. Now our app will have two empty drop zones with their own titles and colors. Now that we have a drop zone component, we can use it within `page_`: Learn more about the HTML global attribute `draggable` within the MDN Web Docs. Note we add `draggable="true"` to our item div to indicate the element can be dragged. `color` - the background color for the drop zone and the items within it `title` - text to display at the top of the drop zone `drop_zone_id` - a value for the root div's `id` attribute (we'll need this for drag-and-drop later)
The list is iterated over and a div is rendered for each item. `draggables` - the list of items currently in the drop zone. In our drop zone LiveComponent we'll pass through four assigns: To learn more about these utility classes review the Tailwind CSS documentation! We've used Tailwind CSS classes to style the elements in our component render. " class="draggable p-4 bg-700 text-white"> Within render, we'll add Live Eex (the multiline string preceded by `~L`) to define how we want our component rendered. Within `lib/draggable_walkthru_web/live` create a file named `drop_zone_component.ex`.Īdd a `mount` function and a `render` function. Next we'll create a LiveComponent for our drop zones. In mount, all the elements in `draggables` will be allocated to `pool` and our drop zones will be initialized with empty lists: `pool` - draggable items that haven't been assigned to a drop zone In a real app this data would come from a datasource. Your `page_live.ex` file should look like this: Remove the call to assign from the `mount` function. Since we removed the default content from `page_`, we don't need these anymore. In `page_live.ex`, remove both `handle_event` functions and the `search` function. Setup PageLive and create LiveComponent Add SortableJS to your project by running the following command in your terminal: We'll use SortableJS to implement drag-and-drop. Because this is a simple project, I'm opting to use the CDN for Tailwind.Īdd the CDN link tag to `` before the link tag for `app.css`: In this example, I'm using Tailwind CSS for quick utility-based styling. Add Tailwind CSS and JavaScript dependencies If you add the `-no-ecto` flag, you won't need to run `mix ecto.create`. If you're following along and don't need an Ecto database, you can add `-no-ecto` when creating your project (`mix phx.new draggable_walkthru -live -no-ecto`). When you run `mix phx.server` you should see the following:ĭon't forget to run `mix ecto.create` before you run `mix phx.server`. Remove boilerplate content from `header` tag in `` and replace it with an `h1` tag:ĭelete everything from `page_` but do not delete the file.
Phoenix liveview form update#
You may need to update `phoenix_live_view` and `phoenix_live_dashboard` in `mix.exs`:
Phoenix liveview form how to#
How to get started Create Phoenix LiveView projectĬreate a Phoenix LiveView project by running the following command in your terminal:
Phoenix liveview form code#
So, it tried to set the phx-target to myself but that only resulted in firing off the form.You can also grab the source code for this demo below if you want to follow along. I had not noticed till I read the logs better that it was failing to find the function on the parent liveview module not the live component that I had enabled uploads on. On my LiveComponent because it was failing.
0 kommentar(er)
