Level: Medium

Napkin-math based on lines added — not a strict rule. Tests, guides, and lockfiles are omitted for better accuracy (closer to SLOC than raw diff).

Jump to file

∟ mix.exs
∟ assets/package.json
∟ assets/css/app.css
∟ assets/js/app.js
∟ assets/vendor/Sortable.js
∟ lib/my_app/tasks.ex
∟ lib/my_app/tasks/status.ex
∟ lib/my_app/tasks/status_order.ex
∟ lib/my_app/tasks/task.ex
∟ lib/my_app/tasks/task_order.ex
∟ lib/my_app_web/components/layouts.ex
∟ lib/my_app_web/components/layouts/root.html.heex
∟ lib/my_app_web/live/task_live/board.ex
∟ lib/my_app_web/live/task_live/components.ex
∟ lib/my_app_web/router.ex
∟ priv/repo/migrations/20250429154243_create_tasks.exs
∟ priv/repo/seeds.exs

Install Elixir deps

Install the following dependency.

EctoOrderable: hexdocs.pm/ecto_orderable

mix.exs Reveal

	`-44,6 +44,7 @@ defmodule MyApp.MixProject do`
	`{:phoenix, "~> 1.8.3"},`
	`{:phoenix_ecto, "~> 4.5"},`
	`{:ecto_sql, "~> 3.13"},`
+	`{:ecto_orderable, "~> 0.3.1"},`
	`{:postgrex, ">= 0.0.0"},`
	`{:phoenix_html, "~> 4.1"},`
	`{:phoenix_live_reload, "~> 1.2", only: :dev},`

Install JS deps

Install the following npm package.

@phx-hook/sortable: npmjs.com/package/@phx-hook/sortable

assets/package.json Reveal

	`-0,0 +1,5 @@`
+	`{`
+	`"dependencies": {`
+	`"@phx-hook/sortable": "^0.1.0"`
+	`}`
+	`}`

CSS variants

Add Tailwind custom variants for drag-and-drop states. The drag variants ( dragging , drag-item , drag-chosen , drag-ghost ) let you style elements differently during drag operations, such as making the ghost element invisible while showing a placeholder.

assets/css/app.css Reveal

	`-96,6 +96,12 @@`
	`@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);`
	`@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);`

+	`/* Add variants for drag-and-drop functionality */`
+	`@custom-variant dragging (.dragging&, .dragging &);`
+	`@custom-variant drag-item (.drag-item&, .drag-item &);`
+	`@custom-variant drag-chosen (.drag-chosen&, .drag-chosen &);`
+	`@custom-variant drag-ghost (.drag-ghost&, .drag-ghost &);`
+
	`/* Use the data attribute for dark mode */`
	`@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));`

JavaScript setup

Import Sortable from the vendor directory along with the SortableHook package. Register the hook with your LiveSocket configuration. The SortableHook function takes the Sortable library as an argument, allowing it to create Sortable instances on elements with the phx-hook="Sortable" attribute.

assets/js/app.js Reveal

	`-24,12 +24,17 @@ import {Socket} from "phoenix"`
	`import {LiveSocket} from "phoenix_live_view"`
	`import {hooks as colocatedHooks} from "phoenix-colocated/my_app"`
	`import topbar from "../vendor/topbar"`
+	`import Sortable from "../vendor/Sortable"`
+	`import SortableHook from "@phx-hook/sortable"`

	`const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")`
	`const liveSocket = new LiveSocket("/live", Socket, {`
	`longPollFallbackMs: 2500,`
	`params: {_csrf_token: csrfToken},`
-	`hooks: {...colocatedHooks},`
+	`hooks: {`
+	`...colocatedHooks,`
+	`Sortable: SortableHook(Sortable)`
+	`},`
	`})`

	`// Show progress bar on live navigation and form submits`
	`-80,4 +85,3 @@ if (process.env.NODE_ENV === "development") {`
	`window.liveReloader = reloader`
	`})`
	`}`
-

Vendor Sortable.js

Download Sortable.js from sortablejs.github.io/Sortable and place it in your vendor directory. This library provides the drag-and-drop functionality for reordering tasks and columns.

assets/vendor/Sortable.js

Diff omitted (vendored file).

Tasks context

The Tasks context provides the public API for working with tasks and statuses. The list_tasks/1 function returns tasks for a given status ordered by their position field. It uses EctoOrderable's first_in_set? and last_in_set? query helpers via select_merge to populate virtual first? and last? fields on each task. These virtual fields indicate whether a task is at the boundary of its list, which the UI uses to conditionally show or hide the move up/down buttons. The list_statuses/0 function returns all statuses ordered by position, representing the columns on the board.

lib/my_app/tasks.ex Reveal

	`-0,0 +1,50 @@`
+	`defmodule MyApp.Tasks do`
+	`import Ecto.Query`
+	`import EctoOrderable.Query`
+
+	`alias MyApp.Repo`
+	`alias MyApp.Tasks.Status`
+	`alias MyApp.Tasks.Task`
+	`alias MyApp.Tasks.TaskOrder`
+
+	`## Tasks`
+
+	`@doc """`
+	`Gets a task by ID.`
+	`"""`
+	`def get_task!(id) do`
+	`Repo.get!(Task, id)`
+	`end`
+
+	`@doc """`
+	`List tasks by status in order of position.`
+	`"""`
+	`def list_tasks(status) do`
+	`Task`
+	`\|> order_by(asc: :position)`
+	`\|> where(status: ^status)`
+	`\|> select_merge([t], %{`
+	`first?: first_in_set?(TaskOrder, ^[status: status], t),`
+	`last?: last_in_set?(TaskOrder, ^[status: status], t)`
+	`})`
+	`\|> Repo.all()`
+	`end`
+
+	`## Statuses`
+
+	`@doc """`
+	`Gets a status.`
+	`"""`
+	`def get_status!(status) do`
+	`Repo.get!(Status, status)`
+	`end`
+
+	`@doc """`
+	`Lists all statuses.`
+	`"""`
+	`def list_statuses() do`
+	`Status`
+	`\|> order_by(asc: :position)`
+	`\|> Repo.all()`
+	`end`
+	`end`

Status schema

The Status schema represents the columns on the Kanban board (Backlog, Todo, In Progress, Done). Rather than using a generated ID, it uses the status enum value itself as the primary key since statuses are a fixed set. The position field is a float that determines the left-to-right order of columns on the board. A helper function status_name/1 converts the atom to a human-readable string for display.

lib/my_app/tasks/status.ex Reveal

	`-0,0 +1,19 @@`
+	`defmodule MyApp.Tasks.Status do`
+	`use Ecto.Schema`
+
+	`@primary_key false`
+
+	`schema "statuses" do`
+	`field :status, Ecto.Enum, values: ~w(backlog todo in_progress done)a, primary_key: true`
+	`field :position, :float`
+	`end`
+
+	`def status_name(status) do`
+	`case status do`
+	`:backlog -> "Backlog"`
+	`:todo -> "Todo"`
+	`:in_progress -> "In Progress"`
+	`:done -> "Done"`
+	`end`
+	`end`
+	`end`

StatusOrder module

This module configures EctoOrderable for the Status schema by using the EctoOrderable.Order behaviour. It specifies the repo, schema, and scope. Since statuses are global and not scoped to any parent entity, the scope option is an empty list. This generates a move/2 function that can reposition statuses relative to each other.

lib/my_app/tasks/status_order.ex Reveal

	`-0,0 +1,6 @@`
+	`defmodule MyApp.Tasks.StatusOrder do`
+	`use EctoOrderable.Order,`
+	`repo: MyApp.Repo,`
+	`schema: MyApp.Tasks.Status,`
+	`scope: []`
+	`end`

Task schema

The Task schema defines the structure for individual tasks on the board. Each task has a number (for display like "TK-123"), title, optional description, status (which column it belongs to), and position (a float for ordering within that column). The virtual fields first? and last? are not stored in the database but are populated at query time to indicate whether a task is at the top or bottom of its column.

lib/my_app/tasks/task.ex Reveal

	`-0,0 +1,18 @@`
+	`defmodule MyApp.Tasks.Task do`
+	`use Ecto.Schema`
+
+	`@primary_key {:id, :binary_id, autogenerate: true}`
+
+	`schema "tasks" do`
+	`field :number, :integer`
+	`field :title, :string`
+	`field :description, :string`
+	`field :status, Ecto.Enum, values: ~w(backlog todo in_progress done)a`
+	`field :position, :float`
+
+	`field :first?, :boolean, virtual: true`
+	`field :last?, :boolean, virtual: true`
+
+	`timestamps()`
+	`end`
+	`end`

TaskOrder module

This module configures EctoOrderable for the Task schema. Unlike StatusOrder, tasks are scoped by their status field, meaning each column maintains its own independent ordering. When you call TaskOrder.move/2 , it calculates the new position relative to other tasks with the same status. If a task's status changes (moved to a different column), EctoOrderable handles inserting it at the correct position in the new column.

lib/my_app/tasks/task_order.ex Reveal

	`-0,0 +1,6 @@`
+	`defmodule MyApp.Tasks.TaskOrder do`
+	`use EctoOrderable.Order,`
+	`repo: MyApp.Repo,`
+	`schema: MyApp.Tasks.Task,`
+	`scope: [:status]`
+	`end`

Layout updates

The Layouts.app component is extended with fullscreen and class attributes. When fullscreen is true, the main content area uses flex-1 flex classes instead of the standard centered container, allowing the board to fill the available space and scroll horizontally.

lib/my_app_web/components/layouts.ex Reveal

	`-26,6 +26,8 @@ defmodule MyAppWeb.Layouts do`

	`"""`
	`attr :flash, :map, required: true, doc: "the map of flash messages"`
+	`attr :class, :string, default: nil`
+	`attr :fullscreen, :boolean, default: false`

	`attr :current_scope, :map,`
	`default: nil,`
	`-62,7 +64,11 @@ defmodule MyAppWeb.Layouts do`
	`</div>`
	`</header>`

-	`<main class="px-4 py-20 sm:px-6 lg:px-8">`
+	`<main :if={@fullscreen} class={[@class, "flex-1 flex"]}>`
+	`{render_slot(@inner_block)}`
+	`</main>`
+
+	`<main :if={not @fullscreen} class="px-4 py-20 sm:px-6 lg:px-8">`
	`<div class="mx-auto max-w-2xl space-y-4">`
	`{render_slot(@inner_block)}`
	`</div>`

Root layout updates

The root layout is updated to support full-height layouts by adding h-full classes to both the html and body elements, along with scrollbar-gutter: stable to prevent layout shift when scrollbars appear.

lib/my_app_web/components/layouts/root.html.heex Reveal

	`-1,5 +1,5 @@`
	`<!DOCTYPE html>`
-	`<html lang="en">`
+	`<html lang="en" class="[scrollbar-gutter:stable] h-full">`
	`<head>`
	`<meta charset="utf-8" />`
	`<meta name="viewport" content="width=device-width, initial-scale=1" />`
	`-25,13 +25,16 @@`
	`setTheme(localStorage.getItem("phx:theme") \|\| "system");`
	`}`
	`window.addEventListener("storage", (e) => e.key === "phx:theme" && setTheme(e.newValue \|\| "system"));`
-
+
	`window.addEventListener("phx:set-theme", (e) => setTheme(e.target.dataset.phxTheme));`
	`})();`
	`</script>`
	`</head>`
-	`<body>`
-	`<ul class="menu menu-horizontal w-full relative z-10 flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end">`
+	`<body class="h-full flex flex-col">`
+	`<ul`
+	`:if={false}`
+	`class="menu menu-horizontal w-full relative z-10 flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end"`
+	`>`
	`<%= if @current_scope do %>`
	`<li>`
	`{@current_scope.user.email}`

Board LiveView

The board LiveView renders a complete Kanban board with draggable columns and tasks. It uses Layouts.app with the fullscreen attribute to fill the viewport. The outer container has a Sortable hook that enables reordering the status columns themselves by dragging their headers. Each column has its own nested Sortable hook with a shared data-group attribute, which allows tasks to be dragged not only within their column but also between columns.

When a drag operation completes, the hook sends an event with the item's ID and its neighboring items' IDs. The handle_event callbacks use StatusOrder.move/2 or TaskOrder.move/2 with the between option to position the item between its new neighbors. For cross-column task moves, the handler first updates the task's status field, then repositions it within the new column.

The LiveView returns layout: false from mount to render the Layouts.app component directly in the template rather than using the default layout wrapper.

lib/my_app_web/live/task_live/board.ex Reveal

	`-0,0 +1,127 @@`
+	`defmodule MyAppWeb.TaskLive.Board do`
+	`use MyAppWeb, :live_view`
+
+	`import MyAppWeb.TaskLive.Components`
+
+	`alias MyApp.Repo`
+	`alias MyApp.Tasks`
+	`alias MyApp.Tasks.StatusOrder`
+	`alias MyApp.Tasks.TaskOrder`
+
+	`def render(assigns) do`
+	`~H"""`
+	`<Layouts.app flash={@flash} fullscreen class="overflow-x-scroll">`
+	`<div class="flex-1 flex p-4 sm:p-6">`
+	`<div`
+	`id="board"`
+	`phx-hook="Sortable"`
+	`data-on-end="move_status"`
+	`data-animation="150"`
+	`data-delay="300"`
+	`data-delay-on-touch-only`
+	`data-ghost-class="drag-ghost"`
+	`data-force-fallback`
+	`data-handle=".drag-handle"`
+	`class="flex gap-8"`
+	`>`
+	`<div`
+	`:for={status <- @statuses}`
+	`data-item-id={status.status}`
+	`class="flex flex-col w-72 gap-2 drag-ghost:invisible"`
+	`>`
+	`<div class="pl-2 drag-handle">`
+	`<span class="text-xs text-base-content/60 font-semibold select-none">`
+	`{Tasks.Status.status_name(status.status)}`
+	`</span>`
+	`</div>`
+	`<div`
+	`id={"board_column_#{status.status}"}`
+	`phx-hook="Sortable"`
+	`data-on-end="move_task"`
+	`data-group="board_columns"`
+	`data-group-id={status.status}`
+	`data-animation="150"`
+	`data-delay="300"`
+	`data-delay-on-touch-only`
+	`data-ghost-class="drag-ghost"`
+	`data-force-fallback`
+	`class="flex-1 flex flex-col gap-2 rounded-lg bg-base-200 p-2"`
+	`>`
+	`<div`
+	`:for={task <- Map.get(@tasks, status.status, [])}`
+	`data-item-id={task.id}`
+	`class="drag-ghost:invisible"`
+	`>`
+	`<.task task={task} />`
+	`</div>`
+	`</div>`
+	`</div>`
+	`</div>`
+	`</div>`
+	`</Layouts.app>`
+	`"""`
+	`end`
+
+	`def mount(_params, _session, socket) do`
+	`socket =`
+	`socket`
+	`\|> assign(:page_title, "Board")`
+	`\|> assign(:auth, false)`
+	`\|> assign(:statuses, Tasks.list_statuses())`
+	`\|> put_tasks()`
+
+	`{:ok, socket, layout: false}`
+	`end`
+
+	`def put_tasks(socket) do`
+	`tasks = Map.new(socket.assigns.statuses, &{&1.status, Tasks.list_tasks(&1.status)})`
+	`assign(socket, :tasks, tasks)`
+	`end`
+
+	`def handle_event("move_status", %{"item_id" => status} = params, socket) do`
+	`to_atom = fn`
+	`nil -> nil`
+	`str -> String.to_existing_atom(str)`
+	`end`
+
+	`status = Tasks.get_status!(to_atom.(status))`
+
+	`StatusOrder.move(status,`
+	`between: {to_atom.(params["prev_item_id"]), to_atom.(params["next_item_id"])}`
+	`)`
+
+	`{:noreply, assign(socket, :statuses, Tasks.list_statuses())}`
+	`end`
+
+	`def handle_event("move_up", %{"id" => task_id}, socket) do`
+	`task_id`
+	`\|> Tasks.get_task!()`
+	`\|> TaskOrder.move(direction: :up)`
+
+	`{:noreply, put_tasks(socket)}`
+	`end`
+
+	`def handle_event("move_down", %{"id" => task_id}, socket) do`
+	`task_id`
+	`\|> Tasks.get_task!()`
+	`\|> TaskOrder.move(direction: :down)`
+
+	`{:noreply, put_tasks(socket)}`
+	`end`
+
+	`def handle_event("move_task", %{"group_id" => status, "item_id" => item_id} = params, socket) do`
+	`status = String.to_existing_atom(status)`
+
+	`{:ok, task} =`
+	`item_id`
+	`\|> Tasks.get_task!()`
+	`\|> Ecto.Changeset.change(status: status)`
+	`\|> Repo.update()`
+
+	`TaskOrder.move(task,`
+	`between: {params["prev_item_id"], params["next_item_id"]}`
+	`)`
+
+	`{:noreply, put_tasks(socket)}`
+	`end`
+	`end`

Task components

The task/1 component renders an individual task card showing the task number, title, current position (for debugging), and a status icon. Move up/down buttons appear conditionally based on the first? and last? virtual fields, preventing users from trying to move a task beyond its boundaries.

The task_status/1 component renders a circular icon representing the task's current status with appropriate colors: gray for Backlog, sky blue for Todo, amber for In Progress, and indigo for Done. Each status has a corresponding icon from the Heroicons set.

lib/my_app_web/live/task_live/components.ex Reveal

	`-0,0 +1,82 @@`
+	`defmodule MyAppWeb.TaskLive.Components do`
+	`use MyAppWeb, :html`
+
+	`attr :task, :map, required: true`
+
+	`def task(assigns) do`
+	`~H"""`
+	`<div class="bg-white dark:bg-black rounded p-2 space-y-2 ring-1 ring-base-300 select-none">`
+	`<div class="flex gap-1 text-base-content/60">`
+	`<span class="text-xs">`
+	`TK-{@task.number} • {:erlang.float_to_binary(@task.position, decimals: 1)}`
+	`</span>`
+	`<span :if={@task.first?} class="text-xs bg-base-100 rounded-sm px-1">`
+	`1st`
+	`</span>`
+	`<span :if={@task.last?} class="text-xs bg-base-100 rounded-sm px-1">`
+	`nth`
+	`</span>`
+	`<div class="flex-1" />`
+	`<button`
+	`:if={not @task.last?}`
+	`class="flex items-center"`
+	`phx-click="move_down"`
+	`phx-value-id={@task.id}`
+	`>`
+	`<.icon name="hero-chevron-down" class="size-3" />`
+	`</button>`
+	`<button`
+	`:if={not @task.first?}`
+	`class="flex items-center"`
+	`phx-click="move_up"`
+	`phx-value-id={@task.id}`
+	`>`
+	`<.icon name="hero-chevron-up" class="size-3" />`
+	`</button>`
+	`</div>`
+	`<div class="pb-2 flex gap-2 text-sm leading-tight">`
+	`<div class="h-[1lh] flex items-center">`
+	`<.task_status status={@task.status} />`
+	`</div>`
+	`<span class="text-base-content/80">{@task.title}</span>`
+	`</div>`
+	`</div>`
+	`"""`
+	`end`
+
+	`attr :status, :atom, required: true`
+
+	`def task_status(assigns) do`
+	`status_assigns =`
+	`case assigns.status do`
+	`:backlog ->`
+	`[`
+	`class: "text-gray-500 border-gray-200 dark:border-gray-800",`
+	`icon: "hero-ellipsis-horizontal"`
+	`]`
+
+	`:todo ->`
+	`[class: "text-sky-500 border-sky-200 dark:border-sky-800", icon: "hero-arrow-right"]`
+
+	`:in_progress ->`
+	`[`
+	`class: "text-amber-500 border-amber-200 dark:border-amber-800",`
+	`icon: "hero-arrow-path"`
+	`]`
+
+	`:done ->`
+	`[class: "text-indigo-500 border-indigo-200 dark:border-indigo-800", icon: "hero-check"]`
+	`end`
+
+	`assigns = assign(assigns, status_assigns)`
+
+	`~H"""`
+	`<div class={[`
+	`@class,`
+	`"size-5 flex items-center justify-center rounded-full border"`
+	`]}>`
+	`<.icon name={@icon} class="size-3" />`
+	`</div>`
+	`"""`
+	`end`
+	`end`

Router

Add a live route for the task board at /board . This example places it as a public route, but you can move it inside an authenticated scope as needed for your application.

lib/my_app_web/router.ex Reveal

	`-21,6 +21,8 @@ defmodule MyAppWeb.Router do`
	`pipe_through :browser`

	`get "/", PageController, :home`
+
+	`live "/board", TaskLive.Board`
	`end`

	`# Other scopes may use custom stacks.`

Migration

The migration creates two tables. The tasks table uses a UUID primary key and includes fields for number (with a unique index for generating sequential task IDs), title, description, status, position, and timestamps. The statuses table uses the status string itself as the primary key with a position field for ordering.

The position field uses the float type, which is central to EctoOrderable's approach. When inserting an item between two others, it calculates a position value between them (e.g., inserting between positions 1.0 and 2.0 yields 1.5). This avoids expensive reordering of all items in the list.

priv/repo/migrations/20250429154243_create_tasks.exs Reveal

	`-0,0 +1,23 @@`
+	`defmodule MyApp.Repo.Migrations.CreateTasks do`
+	`use Ecto.Migration`
+
+	`def change do`
+	`create table(:tasks, primary_key: false) do`
+	`add :id, :binary_id, primary_key: true`
+	`add :number, :integer, null: false`
+	`add :title, :text, null: false`
+	`add :description, :text, null: true`
+	`add :status, :string, null: false`
+	`add :position, :float, null: false`
+
+	`timestamps()`
+	`end`
+
+	`create unique_index(:tasks, [:number])`
+
+	`create table(:statuses, primary_key: false) do`
+	`add :status, :string, primary_key: true`
+	`add :position, :float, null: false`
+	`end`
+	`end`
+	`end`

Seed data

The seeds file populates the database with the four status columns and a set of sample tasks distributed across them. Each status is inserted with an initial position, and tasks are created with sequential numbers and positions within their respective columns. Run the seeds with mix run priv/repo/seeds.exs after running migrations.

priv/repo/seeds.exs Reveal

	`-9,3 +9,31 @@`
	`#`
	# We recommend using the bang functions (`insert!`, `update!`
	`# and so on) as they will fail if something goes wrong.`
+
+	`tasks = [`
+	`%MyApp.Tasks.Task{number: 10, status: :backlog, title: "Set up project with Mix"},`
+	`%MyApp.Tasks.Task{number: 9, status: :backlog, title: "Configure database and Repo"},`
+	`%MyApp.Tasks.Task{number: 8, status: :backlog, title: "Design initial data models"},`
+	`%MyApp.Tasks.Task{number: 7, status: :todo, title: "Generate user auth with phx.gen.auth"},`
+	`%MyApp.Tasks.Task{number: 6, status: :in_progress, title: "Create homepage LiveView"},`
+	`%MyApp.Tasks.Task{number: 5, status: :in_progress, title: "Implement user registration flow"},`
+	`%MyApp.Tasks.Task{number: 4, status: :done, title: "Install and configure Phoenix"},`
+	`%MyApp.Tasks.Task{number: 3, status: :done, title: "Set up Tailwind CSS"},`
+	`%MyApp.Tasks.Task{number: 2, status: :done, title: "Initialize Git and push to GitHub"},`
+	`%MyApp.Tasks.Task{number: 1, status: :done, title: "Write README with setup instructions"}`
+	`]`
+
+	`for task <- tasks do`
+	`MyApp.Repo.insert!(%{task \| position: task.number * 1000.0})`
+	`end`
+
+	`statuses = [`
+	`%MyApp.Tasks.Status{status: :backlog},`
+	`%MyApp.Tasks.Status{status: :todo},`
+	`%MyApp.Tasks.Status{status: :in_progress},`
+	`%MyApp.Tasks.Status{status: :done}`
+	`]`
+
+	`for {status, i} <- Enum.with_index(statuses) do`
+	`MyApp.Repo.insert!(%{status \| position: (i + 1) * 1000.0})`
+	`end`

Install with Claude Code

Write instructions to implement this feature to your project directory in a LLM-friendly format, then have Claude take care of the rest! Requires Claude Code to be installed.

curl "https://elixir-saas.com/llms/p/orderable-tasks.md?v=1.8.3&f=impl" > orderable_tasks.md;

claude "Implement the feature that is documented in: orderable_tasks.md." --allowedTools "Write Edit Bash(mix:*) Bash(mkdir:*)";

Orderable Tasks