Drag

0_06 pre0_05 pre0_04 pre0_03 pre

Mit dem Drag-Modul geben wir dir ein Tool an die Hand, um mit unserem Modulen Drag&Drop-Interaktionen umzusetzen. Damit wird es ganz einfach, eine Zuordnung von Aufgaben, Sortierung von Listen, Zuordnung von Mitarbeitern zu Teams und vieles mehr zu bauen. Dabei fokussieren wir uns in diesem Modul auf die Kern-Funktionen für hohe Performance.

Funktion und Aussehen

Beim Drag-Modul fokussieren wir uns auf die Kern-Funktion - die Drag-Funktion. Daher bringt Drag nicht die Block-Struktur mit, die du sie beispielsweise von unserem Layout kannst. Trotzdem kannst du wie immer den Inhalt des Moduls frei gestalten, indem du Text, andere GIP-Module sowie HTML-Elemente in den Value einbaust. Auch das Styling funktioniert wie üblich, indem du über den Style-Key oder den Class-Key dein individuelles Design eingibst. Mit dem Class-Key kannst du ganz einfach deine eigenen globalen Classes referenzieren.

So simpel wie der Aufbau des Drag-Moduls ist, ist auch sein Einsatz: Alles was du brauchst, ist das Drag-Modul und ein weiteres Modul mit dem Actions-Key, das als Drop-Target, also Ziel, fungiert. Im Drag-Element definierst du, welcher Ziel-Record durch Verschieben des Drag-Elementes ein Update erhalten soll. Im Drop-Target definierst du, welches Feld in diesem Ziel-Record geupdated werden soll und was der neue Wert ist.

Nutzer-Interaktion

Zusätzlich zur Drag-Funktionalität kannst du ganz nach Belieben weitere Interactionen mit dem Drag-Element definieren, indem eine beliebige Anzahl an actions zuweist. Jede Action besteht aus einem auslösenden trigger und einem Array von scripts, die bei Auslösen des Triggers ausgeführt werden. Als Trigger können Klick, Mausbewegung und alle weiteren HTML Mouse Events eingesetzt werden. Weitere Infos zu Actions findest du in diesem Teil unserer Doku.

Modulcode

Basis

GIP_drag({
   uniqueId: "myUniqueName" + Nr,
   embedded: true,
   recordId: raw(Nr),
   value: *any*,
})

Medium

GIP_drag({
   uniqueId: "myUniqueName" + Nr,
   embedded: true,
   recordId: raw(Nr),
   style: "",
   value: *any*,
   draggable: true,
})

Fortgeschritten

GIP_drag({
   uniqueId: "myUniqueName" + Nr,
   embedded: true,
   recordId: raw(Nr),
   class: "",
   style: "",
   value: *any*,
   actions: [{
   	trigger: "click",
   	scripts: [{
   		type: "",
   	}],
   }],
   draggable: true,
})

Vollständig

GIP_drag({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   	presets: "",
   },
   recordId: "",
   class: "",
   style: "",
   value: *any*,
   actions: [{
   	trigger: "",
   	scripts: [{
   		type: "",
   	}],
   }],
   draggable: {
   },
})

Vollständig mit Master

html( raw(GIP_master({})) + 
raw(GIP_drag({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   	presets: "",
   },
   recordId: "",
   class: "",
   style: "",
   value: *any*,
   actions: [{
   	trigger: "",
   	scripts: [{
   		type: "",
   	}],
   }],
   draggable: {
   },
})
))

Key-Table

Beispiele

Drag: Aufgaben sortieren

Beschreibung

Wir möchten unseren Aufgaben per Drag&Drop einen neuen Status zuweisen. In diesem Beispiel nutzen wir das Card-Modul, um die Drop-Targets zu bauen. Es kann aber jedes GIP-Modul mit dem Actions-Key verwendet werden.

Für die Darstellung unserer Stati bauen wir uns zunächst mit einem Layout eine Spalte pro Status auf. Die Stati selbst stellen wir mit Cards dar, wobei wir den Titel separat stylen und danach mit dem Array an Aufgaben zusammenführen.

Jede Aufgabe soll von einer Spalte in eine andere gezogen werden können. Deshalb müssen wir jede Aufgabe mit einem Drag-Modul umschließen:

let my := this;
let statusValues := ((select Status) order by Reihenfolge);
GIP_layout({
	uniqueId: "Spalten Container" + Nr,
	embedded: false,
	direction: "horizontal",
	blocks: statusValues.{
		value: let status := this;
		GIP_card({
			uniqueId: "Spalte" + my.Nr + Nr,
			embedded: true,
			direction: "vertical",
			style: "justify-content: start; gap: 10px; background-color: " + Farbe,
			blocks: 
				let statusTitle := [{ //Titel der Status-Spalte
						style: "font-weight: 700; font-size: 14px;",
						value: Bezeichnung
					}];
				let statusTasks := Aufgaben.{ //Array aller Aufgaben mit dem aktuellen Status der Spalte
						value: GIP_drag({ //Jede Aufgabe wird ein Drag-Element und bekommt styling, um sie klar abzugrenzen
								uniqueId: "Aufgabe" + my.Nr + status.Nr + Nr,
								embedded: true,
								recordId: raw(Nr), //ID des Aufgaben-Records, der beim Drop geupdated werden soll
								style: "text-align: center; border: 1px dotted grey; border-radius: 3px; background-color: white;",
								value: Bezeichnung,
								draggable: true
							})
					};
				array(statusTitle, statusTasks)
		})
	}
})

Nachdem der Drag-Teil definiert ist, müssen wir noch übergeben, welche Action beim Drop auf welches Target ausgeführt werden soll. Unsere Drop-Targets sind die Status-Spalten, also die Cards. Wann immer eine Aufgabe auf eine Status-Card gedroppt wird, möchten wir in der Aufgabe das Status-Feld mit der Status-Zahl der Spalte updaten. Daher definieren wir pro Status-Card eine Action mit dem Trigger "drop" und ein Script vom Typ "dropUpdate". Darin übergeben wir die Field-ID des Aufgaben-Status-Felds und die neue Zahl, die dort eingetragen werden soll:

let my := this;
let statusValues := ((select Status) order by Reihenfolge);
GIP_layout({
	uniqueId: "Spalten Container" + Nr,
	embedded: false,
	direction: "horizontal",
	blocks: statusValues.{
		value: let status := this;
		GIP_card({
			uniqueId: "Spalte" + my.Nr + Nr,
			embedded: true,
			direction: "vertical",
			style: "justify-content: start; gap: 10px; background-color: " + Farbe,
			blocks: [...],
			actions: [{ //Die Action jeder Status-Spalte definiert, was beim Drop des Drag-Elements (also der Aufgabe) passieren soll [!code focus:7]
				trigger: "drop",
				scripts: [{
					type: "dropUpdate",
					fieldId: "E", //Feld-ID des "Status"-Felds in der Tabelle "Aufgaben"
					value: number(status) //Neuer Wert, der in das "Status"-Felds in der Tabelle "Aufgaben" eingetragen werden soll
				}]
			}]
		})
	}
})

Code des Beispiels

Standalone Code mit Master

let my := this;
let statusValues := ((select Status) order by Reihenfolge);
html(raw(GIP_master({})) +
raw(GIP_layout({
	uniqueId: "Spalten Container" + Nr,
	embedded: false,
	direction: "horizontal",
	blocks: statusValues.{
		value: let status := this;
		GIP_card({
			uniqueId: "Spalte" + my.Nr + Nr,
			embedded: true,
			direction: "vertical",
			style: "justify-content: start; gap: 10px; background-color: " + Farbe,
			blocks: 
				let statusTitle := [{
						style: "font-weight: 700; font-size: 14px;",
						value: Bezeichnung
					}];
				let statusTasks := Aufgaben.{
						value: GIP_drag({
								uniqueId: "Aufgabe" + my.Nr + status.Nr + Nr,
								embedded: true,
								recordId: raw(Nr),
								style: "text-align: center; border: 1px dotted grey; border-radius: 3px; background-color: white;",
								value: Bezeichnung,
								draggable: true
							})
					};
				array(statusTitle, statusTasks),
			actions: [{
				trigger: "drop",
				scripts: [{
					type: "dropUpdate",
					fieldId: "E",
					value: number(status)
				}]
			}]
		})
	}
})))

Embedded Code

let my := this;
let statusValues := ((select Status) order by Reihenfolge);
GIP_layout({
	uniqueId: "Spalten Container" + Nr,
	embedded: true,
	direction: "horizontal",
	blocks: statusValues.{
		value: let status := this;
		GIP_card({
			uniqueId: "Spalte" + my.Nr + Nr,
			embedded: true,
			direction: "vertical",
			style: "justify-content: start; gap: 10px; background-color: " + Farbe,
			blocks: 
				let statusTitle := [{
						style: "font-weight: 700; font-size: 14px;",
						value: Bezeichnung
					}];
				let statusTasks := Aufgaben.{
						value: GIP_drag({
								uniqueId: "Aufgabe" + my.Nr + status.Nr + Nr,
								embedded: true,
								recordId: raw(Nr),
								style: "text-align: center; border: 1px dotted grey; border-radius: 3px; background-color: white;",
								value: Bezeichnung,
								draggable: true
							})
					};
				array(statusTitle, statusTasks),
			actions: [{
				trigger: "drop",
				scripts: [{
					type: "dropUpdate",
					fieldId: "E",
					value: number(status)
				}]
			}]
		})
	}
})