Package Exports

@phx-hook/sortable
@phx-hook/sortable/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@phx-hook/sortable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@phx-hook/sortable

Integrate Sortable.js with Phoenix LiveView.

This package does not come with Sortable.js included, instead it is recommended that you download Sortable from their releases and add it directly to your assets/vendor directory.

Usage

import Sortable from "../vendor/Sortable";
import SortableHook from "@phx-hook/sortable";

const defaultSortableOpts = { ... };

const hooks = {
  Sortable: SortableHook(Sortable, defaultSortableOpts);
};

let liveSocket = new LiveSocket("/live", Socket, { hooks, ... });

<div
  id="sortable_list"
  phx-hook="Sortable"
  data-on-end="move_item"
  data-animation="150"
  data-delay="300"
  data-delay-on-touch-only
  data-ghost-class="drag-ghost"
  data-force-fallback
>
  <div
    :for={item <- @items}
    data-item-id={item.id}
    class="drag-ghost:invisible"
  >
    ...
  </div>
</div>

Options

All Sortable.js options are supported.

Attributes

All Sortable.js options are supported as attributes, for example:

swapThreshold: 1 becomes data-swap-threshold="1".