Drag and Drop
How to make views draggable with ui.DnDArea and accept only some of them in a drop zone.

package main
import (
"fmt"
"github.com/worldiety/option"
"go.wdy.de/nago/application"
"go.wdy.de/nago/presentation/core"
"go.wdy.de/nago/presentation/ui"
"go.wdy.de/nago/web/vuejs"
)
func main() {
application.Configure(func(cfg *application.Configurator) {
cfg.SetApplicationID("de.worldiety.tutorial_79")
cfg.Serve(vuejs.Dist())
option.MustZero(cfg.StandardSystems())
cfg.SetDecorator(cfg.NewScaffold().
Decorator())
cfg.RootViewWithDecoration(".", func(wnd core.Window) core.View {
dropped := core.AutoState[string](wnd).Observe(func(newValue string) {
fmt.Printf("dropped %v\n", newValue)
})
return ui.VStack(
ui.HStack(
ui.DnDArea(ui.VStack(ui.Text("A")).
BackgroundColor(ui.ColorSemanticWarn).
Frame(ui.Frame{}.Size(ui.L64, ui.L64)),
).ID("a").
CanDrag(true),
ui.DnDArea(ui.VStack(ui.Text("B")).
BackgroundColor(ui.ColorSemanticWarn).
Frame(ui.Frame{}.Size(ui.L64, ui.L64)),
).ID("b").
CanDrag(true),
ui.DnDArea(ui.VStack(ui.Text("C")).
BackgroundColor(ui.ColorSemanticWarn).
Frame(ui.Frame{}.Size(ui.L64, ui.L64)),
).ID("c").
CanDrag(true),
),
ui.DnDArea(
ui.VStack(ui.Text("drop zone")).
BackgroundColor(ui.ColorSemanticError).
Frame(ui.Frame{}.Size(ui.L120, ui.L120)),
).ID("b").
Droppable("a", "c").
CanDrop(true).
InputValue(dropped),
).Padding(ui.Padding{}.All(ui.L16)).Frame(ui.Frame{}.Large())
})
}).Run()
}
View on GitHub ↗
· run it with go run go.wdy.de/nago/example/cmd/tutorial-80-drag-and-drop@latest