All options have default values
Sortable(dom.document.getElementById("items"))
Items of the foo and bar groups can be moved to the qux group
new Sortable(dom.document.getElementById("bar"), js.Dictionary(
"group" -> "bar",
"animation" -> 100
))
new Sortable(dom.document.getElementById("foo"), js.Dictionary(
"group" -> "foo",
"animation" -> 100
))
new Sortable(dom.document.getElementById("qux"), js.Dictionary(
"group" -> js.Dictionary(
"name" -> "qux",
"put" -> js.Array("foo", "bar")),
"animation" -> 100
)
)
val pull: js.Function2[Sortable, Sortable, js.Any] = { (to: Sortable, from: Sortable) => {
from.el.children.length match {
case x if x > 3 => true
case _ => "clone"
}
}
}
val put: js.Function1[Sortable, js.Any] = { (to: Sortable) => to.el.children.length < 4 }
new Sortable(dom.document.getElementById("foo1"), js.Dictionary("group" -> "foo1", "animation" -> 100))
val bar1Prop = new SortableProps {
override val group = js.Dictionary(
"name" -> "bar1",
"put" -> js.Array("qux1"),
"pull" -> pull
)
override val animation = 100
}
new Sortable(dom.document.getElementById("bar1"), bar1Prop)
new Sortable(dom.document.getElementById("qux1"), js.Dictionary(
"group" -> js.Dictionary(
"name" -> "qux1",
"put" -> put),
"animation" -> 100
)
)
Sorting inside list can be disabled
new Sortable(dom.document.getElementById("sortTrue"), js.Dictionary(
"group" -> "sorting",
"sort" -> true,
"animation" -> 200
))
new Sortable(dom.document.getElementById("sortFalse"), js.Dictionary(
"group" -> "sorting",
"sort" -> false,
"animation" -> 200
))
Time in milliseconds to define when the sorting should start. Unfortunately this option doesn't work very well.
new Sortable(dom.document.getElementById("list"), js.Dictionary(
"delay" -> 400
))
Push the button to disable
val sortable = Sortable(dom.document.getElementById("list1"))
val switcher = dom.document.getElementById("switcher")
switcher.asInstanceOf[HTMLElement].onclick = (event: Event) => {
val state = sortable.option("disabled").asInstanceOf[Boolean] // get
sortable.option("disabled", !state) // set
switcher.innerHTML = state match {
case true => "disable"
case false => "enable"
}
}
To make list items draggable, Sortable.js disables text selection by the user. That's not always desirable. To allow text selection, define a drag handler, which is an area of every list element that allows it to be dragged around.
new Sortable(dom.document.getElementById("listWithHandle"), js.Dictionary(
"handle" -> ".my-handle",
"animation" -> 150
))
ghostClass is a class name for the drop placeholder
new Sortable(dom.document.getElementById("simpleList"), js.Dictionary(
"ghostClass" -> "ghost",
"animation" -> 350
))
Sortable.js works well with "display:inline-block" elements.
When an item is chosen, it will become red.
new Sortable(dom.document.getElementById("chosenList"), js.Dictionary(
"ghostClass" -> "ghost1",
"chosenClass" -> "chosen",
"animation" -> 200
))
HTML5 Drag 'n Drop is disabled
new Sortable(dom.document.getElementById("foo2"), js.Dictionary(
"group" -> "foo2",
"animation" -> 100,
"forceFallback" -> true,
"fallbackClass" -> "good"
))
Scroll support is switched on by default
Sortable(dom.document.getElementById("scrollList"))
See in the console
val props = js.Dictionary("group" -> "share", "animation" -> 100)
val e1 = Sortable(dom.document.getElementById("eventsList1"), props)
val e2 = Sortable(dom.document.getElementById("eventsList2"), props)
val fs: js.Function1[EventS, Unit] = (event) => {
console info event.`type`
console log event
}
val fm: js.Function1[EventM, Unit] = (event) => {
console info event.`type`
console log event
}
e1.option("onChoose", fs)
e1.option("onStart", fs)
e1.option("onEnd", fs)
e1.option("onAdd", fs)
e1.option("onUpdate", fs)
e1.option("onSort", fs)
e1.option("onRemove", fs)
e1.option("onFilter", fs)
e1.option("onClone", fs)
e1.option("onMove", fm)
e2.option("onChoose", fs)
e2.option("onStart", fs)
e2.option("onEnd", fs)
e2.option("onAdd", fs)
e2.option("onUpdate", fs)
e2.option("onSort", fs)
e2.option("onRemove", fs)
e2.option("onFilter", fs)
e2.option("onClone", fs)
e2.option("onMove", fm)
Order of the list will be restored after the page reloading
val get: js.Function1[Sortable, js.Array[String]] = { (sortable: Sortable) => {
import js.JSConverters._ //this adds additional 30kB :((
val order = window.localStorage.getItem(sortable.option("group").name.asInstanceOf[String])
order match {
case x:String => x.split("|").toJSArray
case _ => js.Array[String]()
}
}}
val set: js.Function1[Sortable, Unit] = { (sortable: Sortable) => {
val order = sortable.toArray()
window.localStorage.setItem("localStorage-example", order.join("|"))
}}
val storeProps = new SortableProps{
override val group = "localStorage-example"
override val store = js.Dictionary(
"get" -> get,
"set" -> set
)
override val onStart: UndefOr[Function1[EventS, Unit]] = js.defined{
(event:EventS) => console log event
}
}
Sortable(dom.document.getElementById("storage"), storeProps)