Drag and Drop

OverviewDrag and Drop

Overview

Dran and Drop is available for any DOM node using the DragTarget and DropTarget APIs.

Drag and Drop

Any Elem can be converted into a drag target using DragTarget:

Box
{
  it.text = "Drag me"
  DragTarget.bind(it)
  {
    // get the data payload when a drag event starts
    it.onDrag { "Hi :)" }
  }
}

Likewise any Elem can be converted into a drop target using DropTarget:

Box
{
  it.text = "Drop on me"
  DropTarget.bind(it)
  {
    it.onDrop |data| { echo("# drop: $data") }
  }
}

You may specify if the given drag data is able to be dropped on a DropTarget using canDrop:

DropTarget.bind(elem)
{
  it.canDrop |data| { data == "foo" }
  it.onDrop  |data| { echo("# drop: $data") }
}