Skip to content

Commit

Permalink
Add screenshots
Browse files Browse the repository at this point in the history
Add images to documentation
  • Loading branch information
SimonLab committed Nov 1, 2022
1 parent 163b5f9 commit 4572d5d
Showing 1 changed file with 8 additions and 2 deletions.
10 changes: 8 additions & 2 deletions drag-and-drop.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@ mix ecto.create
mix phx.server
```

You should be able to see [localhost:4000/](localhost:4000/)
You should be able to see [localhost:4000/](http://localhost:4000/):

![Phoenix App](https://user-images.githubusercontent.com/6057298/199209631-b3c084e0-62f4-43f2-a4bc-ccb57f101443.png)

To build the UI we're going to use [Petal Components](https://petal.build/components).
Petal provides the [table](https://petal.build/components/table) components that will
Expand Down Expand Up @@ -371,6 +373,10 @@ let liveSocket = new LiveSocket("/live", Socket, {

This is to make sure Alpine.js keeps track of the DOM changes created by LiveView.

See the [Phoenix LiveView JavaScript interoperability documentation]:

![Alpine.js](https://user-images.githubusercontent.com/6057298/199215481-489e71fb-9a95-4d24-9484-e90b6257211c.png)

Now we're going to start by adding a new background colour to the item being
dragged and remove the colour when the drag ends.

Expand Down Expand Up @@ -766,7 +772,7 @@ if you think there is a better way to do this don't hesitate to open an issue, t
Finally similar to the way we tell clients a new item has been created, we
broadcast a new message, `indexes_updated`:

```elxir
```elixir
def handle_info(:indexes_updated, socket) do
items = list_items()
{:noreply, assign(socket, items: items)}
Expand Down

0 comments on commit 4572d5d

Please sign in to comment.