Drag-and-Drop Tutorial

This tutorial explains how to use the Drag-and-Drop (DnD) APIs.

Usage

Draggable

const { draggable } = core.make("meeseOS/dnd");

draggable(element, {
  data: { hello: "World!" }
});

Droppable

const { droppable } = core.make("meeseOS/dnd");

droppable(element, {
  ondrop: (ev, data) => console.log(data) // => {hello: "World!"}
});

Usage in Hyperapp

A very basic example:

h(Component, { oncreate: element => draggable(element, { data: { hello: "World!" }}) });