See DEMO
a scala.js facade for the Sortable.js
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