This is a Demo Page of sortable-js-facade for Scala.js

See the full code of these examples here

Example 1

All options have default values


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

Example 2

Items of the foo and bar groups can be moved to the qux group

Source group

Source group

Target 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
)
)        
        
      

Example 3

Source group

Source/ Target group

Source/ Target group


val pull: js.Function2[Sortable, Sortable, js.Any] = { (to: Sortable, from: Sortable) => {

  from.el.children.length match {
    case x if x > 2 => 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

)
)          
          
        

Example 4

Sorting inside list can be disabled

sort: true

foo
bar
baz

sort: false

qux
quux

 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

))         
          
        

Example 5

Delay

Time in milliseconds to define when the sorting should start. Unfortunately this option doesn't work very well.

foo
bar
baz

new Sortable(dom.document.getElementById("list"), js.Dictionary(

  "delay" -> 400

))         
          
        

Example 6

Disabled

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"
  }
}         
          
        

Example 7

Handle

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
))          
          
        

Example 8

Ghost

ghostClass is a class name for the drop placeholder

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8

new Sortable(dom.document.getElementById("simpleList"), js.Dictionary(
  "ghostClass" -> "ghost",
  "animation" -> 350
))          
          
        

Example 9

Chosen

Sortable.js works well with "display:inline-block" elements.

When an item is chosen, it will become red.

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12
item 13
item 14
item 15
item 16
item 17
item 18
item 19
item 20

new Sortable(dom.document.getElementById("chosenList"), js.Dictionary(
  "ghostClass" -> "ghost1",
  "chosenClass" -> "chosen",
  "animation" -> 200
))         
          
        

Example 10

force fallback

HTML5 Drag 'n Drop is disabled


new Sortable(dom.document.getElementById("foo2"), js.Dictionary(
  "group" -> "foo2",
  "animation" -> 100,
  "forceFallback" -> true,
  "fallbackClass" -> "good"

))
          
        

Example 11

Scroll

Scroll support is switched on by default

item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12
item 13
item 14
item 15
item 16
item 17
item 18
item 19
item 20

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

Example 12

Events

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)

          
          
        

Example 13

Store

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)