Skip to content

Drag and Drop

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

Drag and Drop

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