• Quick Start
• class Sortable
• Companion
• Events
• SortableProps trait
• Utils object

Add to build.sbt:

libraryDependencies ++= Seq(
  "net.scalapro" %%% "sortable-js-facade" % "1.0.0"
)

You should also get sortablejs lib:

   npm i sortablejs

Simple usage:

new Sortable(dom.document.getElementById("items"), null)

or using the companion object:

Sortable(dom.document.getElementById("items"))

With options:

val put: js.Function1[Sortable, js.Any] = {(to:Sortable ) => to.el.children.length < 4}

new Sortable(dom.document.getElementById("qux1"), js.Dictionary(
      "group" -> js.Dictionary(
        "name" -> "qux1",
        "put" -> put),
      "animation" -> 100

    )
 )

new Sortable(element, options)

element: org.scalajs.dom.Element - an html element that contains a list of elements to be sorted

options: js.Any - a plain javascript object of options. You can use js.Dictionary, js.Dynamic.literal. Or you can use the SortableProps trait (see below). The full list of options is described here. Can be null. Then all options take their default values.

###Methods

option(name: String): js.Dynamic - returns the value of the option

option(name: String, value: js.Any): Unit - set a new value of the option

closest(el: Node, selector: String): js.UndefOr[Node] or closest(el: Node): js.UndefOr[Node] - for each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

toArray(): js.Array[String] - serializes the sortable's item data-id's (dataIdAttr option) into an array of string.

sort(order: js.Array[String]): Unit - sorts the elements according to the array

save(): Unit - saves the current sorting

destroy(): Unit - removes the sortable functionality completely

It has only one but very useful method apply, which is a facade for native static create method. It allows to do this:

Sortable(el1)
Sortable(el2, options)

See example

• to: HTMLElement — list, in which moved element.
• from: HTMLElement — previous list
• item: HTMLElement — dragged element
• oldIndex: Number | undefined — old index within parent
• newIndex: Number | undefined — new index within parent

• to: HTMLElement
• from: HTMLElement
• dragged: HTMLElement
• draggedRect: TextRectangle
• related: HTMLElement — element on which have guided
• relatedRect: TextRectangle

You can use this trait to define options:

val prop = new SortableProps {
      override val group = "bar"
      override val animation = 100
    }
Sortable(el, prop)

group: js.UndefOr[String | js.Any] - defines a group name or an object

sort: js.UndefOr[Boolean] - sorting inside list

delay: js.UndefOr[Int] - time in milliseconds to define when the sorting should start

disable: js.UndefOr[Boolean] - disables the sortable if set to true.

store: js.UndefOr[js.Any] - an object

animation: js.UndefOr[Int] - ms, animation speed moving items when sorting, 0 — without animation

handle: js.UndefOr[String] - drag handle selector within list items

filter: js.UndefOr[String] - selectors that do not lead to dragging (String or Function)

draggable: js.UndefOr[String] - specifies which items inside the element should be draggable

ghostClass: js.UndefOr[String] - class name for the drop placeholder

chosenClass: js.UndefOr[String] - class name for the chosen item

dragClass: js.UndefOr[String] - class name for the dragging item

dataIdAttr: js.UndefOr[String]

forceFallback: js.UndefOr[Boolean] - ignore the HTML5 DnD behaviour and force the fallback to kick in

fallbackClass: js.UndefOr[String] - class name for the cloned DOM Element when using forceFallback

fallbackOnBody: js.UndefOr[Boolean] - appends the cloned DOM Element into the Document's Body

fallbackTolerance: js.UndefOr[Int] - specifies in pixels how far the mouse should move before it's considered as a drag.

scroll: js.UndefOr[Boolean | Element] - HTMLElement

scrollFn: js.UndefOr[js.Function3[Int, Int, Event, Unit]] - function(offsetX, offsetY, originalEvent) { ... }, if you have custom scrollbar scrollFn may be used for autoscrolling

scrollSensitivity: js.UndefOr[Int] - px, how near the mouse must be to an edge to start scrolling.

scrollSpeed: js.UndefOr[Int] - px

setData: js.UndefOr[js.Function2[DataTransfer, Element,Unit]] - sets data to the DataTransfer object of HTML5 DragEvent

onChoose: js.UndefOr[js.Function1[EventS, Unit]] - Element is chosen

onStart: js.UndefOr[js.Function1[EventS, Unit]] - Element dragging started

onEnd: js.UndefOr[js.Function1[EventS, Unit]] - Element dragging ended

onAdd: js.UndefOr[js.Function1[EventS, Unit]] - Element is dropped into the list from another list

onUpdate: js.UndefOr[js.Function1[EventS, Unit]] - Changed sorting within list

onSort: js.UndefOr[js.Function1[EventS, Unit]] - Called by any change to the list (add / update / remove)

onRemove: js.UndefOr[js.Function1[EventS, Unit]] - Element is removed from the list into another list

onFilter: js.UndefOr[js.Function1[EventS, Unit]] - Attempt to drag a filtered element

onMove: js.UndefOr[js.Function2[EventM, Event, Unit]] - Event when you move an item in the list or between lists

onClone: js.UndefOr[js.Function1[EventS, Unit]] - Called when creating a clone of element

A set of useful static methods.

on(el: Node, event: String, fn: js.Function1[Event, Unit]): Unit - attaches an event handler function

off(el: Node, event: String, fn: js.Function1[Event, Unit]): Unit - removes an event handler

css(el: Node): js.Object - gets the values of all the CSS properties

css(el: Node, prop: String): js.Any - get the value of style properties

css(el: Node, prop: String, value: String): Unit - sets one CSS property

find(ctx: Node, tagName: String): js.Array[Node] - gets elements by tag name

find(ctx: Node, tagName: String, iterator: js.Function2[Node, Int, Unit]): js.Array[Node] - gets elements by tag name

bind(ctx: js.Any, fn: js.Function): js.Function - takes a function and returns a new one that will always have a particular context

is(el: Node, selector: String): Boolean - check the current matched set of elements against a selector

closest(el: Node, selector: String, ctx: Node): js.UndefOr[Node] or closest(el: Node, selector: String): js.UndefOr[Node] - for each element in the set, gets the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree

clone(el:Node): Node - creates a deep copy of the set of matched elements

toggleClass(el: Node, name: String, state: Boolean): Uni - adds or removes a class from each element