Change position of an element

assets/js/app.js

@@ -16,9 +16,21 @@ import "phoenix_html"
 import {Socket} from "phoenix"
 import topbar from "topbar"
 import {LiveSocket} from "phoenix_live_view"
+import {InitSortable} from "./init_sortable"
+
+let Hooks = {
+  InitSortable: InitSortable
+}
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let liveSocket = new LiveSocket(
+  "/live",
+  Socket,
+  {
+    hooks: Hooks,
+    params: {_csrf_token: csrfToken}
+  }
+)
 
 // Show progress bar on live navigation and form submits
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
@@ -33,4 +45,3 @@ liveSocket.connect()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket
-

assets/js/init_sortable.js

@@ -0,0 +1,27 @@
+import Sortable from "sortablejs"
+
+export const InitSortable = {
+  mounted() {
+    const callback = list => {
+      this.pushEventTo(this.el.dataset.targetId, "sort", { list: list })
+    }
+
+    this.init(callback)
+  },
+  init(callback) {
+    const targetNode = this.el
+    const sortable = new Sortable(targetNode, {
+      onSort: evt => {
+        const nodeList = targetNode.querySelectorAll("[data-sortable-id]")
+        const list = [...nodeList].map((element, index) => (
+          {
+            id: element.dataset.sortableId,
+            position: index
+          }
+        ))
+
+        callback(list)
+      }
+    })
+  }
+}

assets/package.json

@@ -10,6 +10,7 @@
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",
+    "sortablejs": "^1.14.0",
     "topbar": "^0.1.4"
   },
   "devDependencies": {
@@ -18,11 +19,11 @@
     "babel-loader": "^8.0.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",
-    "sass-loader": "^8.0.2",
-    "node-sass": "^4.13.1",
     "hard-source-webpack-plugin": "^0.13.1",
     "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "sass-loader": "^8.0.2",
     "terser-webpack-plugin": "^2.3.2",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.2"

lib/todo_app/todos.ex

@@ -18,7 +18,7 @@ defmodule TodoApp.Todos do
 
   """
   def list_todos do
-    Repo.all(Todo)
+    Todo |> order_by(asc: :position) |> Repo.all()
   end
 
   def list_completed_todos do

lib/todo_app/todos/todo.ex

@@ -5,14 +5,15 @@ defmodule TodoApp.Todos.Todo do
   schema "todos" do
     field :title, :string
     field :completed, :boolean
+    field :position, :integer
 
     timestamps()
   end
 
   @doc false
   def changeset(todo, attrs) do
     todo
-    |> cast(attrs, [:title, :completed])
+    |> cast(attrs, [:title, :completed, :position])
     |> validate_required([:title])
   end
 end

lib/todo_app_web/live/todo_live.ex

@@ -23,9 +23,9 @@ defmodule TodoAppWeb.TodoLive do
         <%= error_tag f, :title %>
         <%= submit "Add", phx_disable_with: "Adding..." %>
       <% end %>
-      <ul>
+      <ul phx-hook="InitSortable" id="items" data-target-id="#items">
         <%= for todo <- @todos do %>
-          <li>
+          <li data-sortable-id=<%=todo.id %>>
             <%= content_tag :input,
                 nil,
                 type: "checkbox",
@@ -98,6 +98,16 @@ defmodule TodoAppWeb.TodoLive do
     {:noreply, fetch(socket)}
   end
 
+  def handle_event("sort", %{"list" => list}, socket) do
+    list
+    |> Enum.each(fn %{"id" => id, "position" => position} ->
+      Todos.get_todo!(id)
+      |> Todos.update_todo(%{"position" => position})
+    end)
+
+    {:noreply, socket}
+  end
+
   def handle_params(%{"edit" => id}, _uri, socket) do
     todo = Todos.get_todo(id)
 

priv/repo/migrations/20210709160407_add_position_to_todos.exs

@@ -0,0 +1,9 @@
+defmodule TodoApp.Repo.Migrations.AddPositionToTodos do
+  use Ecto.Migration
+
+  def change do
+    alter table(:todos) do
+      add :position, :integer, default: 0
+    end
+  end
+end