[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"portal-settings:stajic:de":3,"public-menus:all":37,"post:drag-and-drop-beispiel:de":204,"related:post:drag-and-drop-beispiel:de:1":448},{"statusCode":4,"data":5,"message":36},200,{"tenantId":6,"lang":7,"defaultLang":7,"siteUrl":8,"contactEmail":9,"brandName":10,"logoUrl":11,"siteName":10,"siteDescription":12,"ogImage":9,"robotsIndex":13,"socialLinks":9,"reservedSlugs":9,"seoPolicy":14},"stajic","de","https:\u002F\u002Fstajic.de",null,"Stajic Platform","\u002FLogo_Planet.svg","Stajic Portal",true,{"branding":15,"relatedContent":16,"crossDomainLinks":17},{"logoUrl":11},{"enabled":13},[18,21,24,27,30,33],{"url":19,"label":20,"isActive":13,"showInFooter":13,"includeInSameAs":13},"https:\u002F\u002Ffigure.rocks","figure.rocks",{"url":22,"label":23,"isActive":13,"showInFooter":13,"includeInSameAs":13},"https:\u002F\u002Floving.rocks","loving.rocks",{"url":25,"label":26,"isActive":13,"showInFooter":13,"includeInSameAs":13},"https:\u002F\u002Fbazify.com","bazify.com",{"url":28,"label":29,"isActive":13,"showInFooter":13,"includeInSameAs":13},"https:\u002F\u002Fbazify.de","bazify.de",{"url":31,"label":32,"isActive":13,"showInFooter":13,"includeInSameAs":13},"https:\u002F\u002Fbazify.at","bazify.at",{"url":34,"label":35,"isActive":13,"showInFooter":13,"includeInSameAs":13},"https:\u002F\u002Fbazify.ba","bazify.ba","Portal settings resolved",[38,44],{"id":39,"name":40,"location":41,"isActive":13,"isDefault":42,"items":43},1,"main-navigation","header",false,[],{"id":45,"name":46,"location":47,"isActive":13,"isDefault":13,"items":48},4,"main-menu","sidebar",[49,65,78,92,102,117,132],{"id":50,"title":51,"url":59,"target":60,"icon":61,"isActive":13,"type":62,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":63,"portfolioId":9,"children":64},"item-18",{"de":52,"en":53,"es":54,"fr":55,"it":53,"ru":56,"sr":57,"zh":58},"Startseite","Home","Inicio","Accueil","Главная","Почетна","首页","\u002Ffull-stack-web-developer-munich-performance-seo-and-maintainable-builds","_self","i-lucide-home","page",111,[],{"id":66,"title":67,"url":74,"target":60,"icon":75,"isActive":13,"type":62,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":76,"portfolioId":9,"children":77},"item-22",{"de":68,"en":68,"es":69,"fr":68,"it":70,"ru":71,"sr":72,"zh":73},"Vision","Visión","Visione","Видение","Визија","想象","\u002Fueber-uns-webdesign-muenchen-webaplikation","i-lucide-eye",113,[],{"id":79,"title":80,"url":88,"target":60,"icon":89,"isActive":13,"type":62,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":90,"portfolioId":9,"children":91},"item-19",{"de":81,"en":82,"es":83,"fr":82,"it":84,"ru":85,"sr":86,"zh":87},"Leistungen","Services","Servicios","Servizi","Услуги","Услуге","服务","\u002Fservices-dienstleistungen-muenchen","i-lucide-wrench",116,[],{"id":93,"title":94,"url":98,"target":60,"icon":99,"isActive":13,"type":62,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":100,"portfolioId":9,"children":101},"item-23",{"de":95,"en":95,"es":95,"fr":95,"it":95,"ru":96,"sr":96,"zh":97},"Blog","Блог","博客","\u002Fblog","i-lucide-book-open",112,[],{"id":103,"title":104,"url":113,"target":60,"icon":114,"isActive":13,"type":62,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":115,"portfolioId":9,"children":116},"item-32",{"de":105,"en":106,"es":107,"fr":108,"it":109,"ru":110,"sr":111,"zh":112},"Neue Technologien","New Technologies","Nuevas tecnologías","Nouvelles technologies","Nuove tecnologie","Новые технологии","Нове технологије","新技术！","\u002Fneue-webtechnologien","i-lucide-sparkles",122,[],{"id":118,"title":119,"url":128,"target":60,"icon":129,"isActive":13,"type":62,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":130,"portfolioId":9,"children":131},"item-20",{"de":120,"en":121,"es":122,"fr":123,"it":124,"ru":125,"sr":126,"zh":127},"Kontakt","Contact us!","Contacto","Contact","Contatto","Контакт","Контактирајте нас","联系我们！","\u002Fcontact","i-lucide-mail",115,[],{"id":133,"title":134,"url":143,"target":60,"icon":144,"isActive":13,"type":62,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":145,"portfolioId":9,"children":146},"item-21",{"de":135,"en":136,"es":137,"fr":138,"it":139,"ru":140,"sr":141,"zh":142},"Unsere Arbeit","Our Work","Nuestro trabajo","Nos réalisations","I nostri lavori","Наши работы","Наши радови","文件夹","\u002Fportfolio","i-lucide-briefcase",114,[147,160,174,180,192],{"id":148,"title":149,"url":143,"target":60,"icon":158,"isActive":13,"type":62,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":145,"portfolioId":9,"children":159},"item-24",{"de":150,"en":151,"es":152,"fr":153,"it":154,"ru":155,"sr":156,"zh":157},"Alle Projekte","All Projects","Todos los proyectos","Tous les projets","Tutti i progetti","Все проекты","Сви пројекти","所有项目","i-lucide-grid-3x3",[],{"id":161,"title":162,"url":170,"target":60,"icon":171,"isActive":13,"type":172,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":9,"portfolioId":9,"children":173},"item-29",{"de":163,"en":164,"es":165,"fr":166,"it":167,"ru":168,"sr":169,"zh":142},"Local Roots, Global Reach","Local Roots - Global Reach","Empresa local ","Entreprise locale","Azienda locale","Местная компания","Локално предузеће глобално тржиште","\u002Fportfolio\u002Flocal-roots-global-reach-communication-media-systems-for-modern-business","i-lucide-folder","custom",[],{"id":175,"title":176,"url":178,"target":60,"icon":171,"isActive":13,"type":172,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":9,"portfolioId":9,"children":179},"item-28",{"de":177,"en":177,"es":177,"fr":177,"it":177,"ru":177,"sr":177,"zh":177},"Solr Suggester","\u002Fportfolio\u002Fsolr-fuzzy-suggester-und-solr-infix-suggester-abfrage-ueber-ajax-und-filterung",[],{"id":181,"title":182,"url":190,"target":60,"icon":171,"isActive":13,"type":172,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":9,"portfolioId":9,"children":191},"item-27",{"de":183,"en":184,"es":185,"fr":186,"it":187,"ru":188,"sr":189,"zh":184},"Firmenwebseite SEO","Company Website SEO","Sitio web corporativo SEO","Site web d’entreprise SEO","Sito web aziendale SEO","Корпоративный сайт SEO","Пословна веб-страница SEO","\u002Fportfolio\u002Fseo-sem-branding-mobile-webseite-muenchen",[],{"id":193,"title":194,"url":202,"target":60,"icon":171,"isActive":13,"type":172,"productId":9,"categoryId":9,"shopCategoryId":9,"articleId":9,"pageId":9,"portfolioId":9,"children":203},"item-31",{"de":195,"en":196,"es":197,"fr":198,"it":199,"ru":200,"sr":201,"zh":196},"Digitalisierungsportal","Digitalization Portal","Portal de digitalización","Portail de numérisation","Portale di digitalizzazione","Портал цифровизации","Портал за дигитализацију","\u002Fportfolio\u002Fdigitalisierungsportal-archiv-museum-bibliothek-ead-lido-mets-mods",[],{"statusCode":4,"data":205,"message":447},{"id":206,"title":207,"slug":208,"content":209,"contentJson":210,"excerpt":310,"featuredImage":311,"featuredImageAlt":312,"featuredImageCaption":9,"featuredImageTitle":9,"featuredImageCopyright":9,"featuredImageAuthor":9,"featuredImageSourceUrl":9,"featuredImageLicense":9,"featuredImageIsAiGenerated":42,"status":313,"publishedAt":314,"createdAt":315,"updatedAt":316,"seoLocalePaths":317,"categories":325,"author":326,"translations":331},"368","Drag-and-Drop mit JavaScript: Eine tiefgehende Analyse der nativen API für interaktive Menüstrukturen","drag-and-drop-beispiel","{\"time\":1701198000,\"blocks\":[{\"data\":{\"text\":\"Einführung in das native Drag-and-Drop in JavaScript\",\"level\":2},\"type\":\"header\"},{\"data\":{\"text\":\"Interaktive Benutzeroberflächen (UIs) sind ein fundamentaler Bestandteil moderner Webanwendungen. Die Möglichkeit, Elemente per Drag-and-Drop zu verschieben, verbessert die Benutzererfahrung signifikant, insbesondere bei der Verwaltung von Listen, Menüs oder der Organisation von Inhalten. Während in der Vergangenheit oft komplexe Bibliotheken oder Frameworks zur Implementierung dieser Funktionalität notwendig waren, bietet die native HTML5 Drag-and-Drop API eine standardisierte, leistungsstarke Lösung, die direkt in Vanilla JavaScript genutzt werden kann.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Dieser Artikel dient als technische Analyse und Demonstration der Prinzipien, die hinter der Implementierung von Drag-and-Drop-Funktionalität in JavaScript stehen. Der Fokus liegt auf der präzisen Steuerung des Datenflusses und der Event-Behandlung, die notwendig ist, um beispielsweise eine dynamische Menüstruktur neu anzuordnen.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Grundlagen des HTML5 Drag-and-Drop API\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"Die native Drag-and-Drop API basiert auf einer Reihe von DOM-Ereignissen und dem globalen Attribut `draggable`. Um ein Element verschiebbar zu machen, muss dieses Attribut auf `true` gesetzt werden. Die Interaktion gliedert sich in zwei Hauptbereiche: das ziehende Element (Drag Source) und das ablegbare Ziel (Drop Target).\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Der Prozess des Ziehens und Ablegens wird durch eine definierte Kette von Ereignissen gesteuert, die präzise behandelt werden müssen, um die gewünschte Funktionalität zu gewährleisten. Insbesondere die korrekte Behandlung des `dragover`-Ereignisses ist entscheidend, da Browser standardmäßig das Ablegen von Elementen verhindern.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Vorteile der nativen Implementierung\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"Die Entscheidung für die native HTML5 API gegenüber externen Bibliotheken bietet mehrere technische und architektonische Vorteile:\"},\"type\":\"paragraph\"},{\"data\":{\"items\":[\"\u003Cstrong>Standardisierung und Browser-Kompatibilität:\u003C\u002Fstrong> Die API ist ein Webstandard, der von allen modernen Browsern nativ unterstützt wird, was die Notwendigkeit von Polyfills reduziert.\",\"\u003Cstrong>Performance:\u003C\u002Fstrong> Da die Funktionalität nativ im Browser implementiert ist, ist die Performance in der Regel höher als bei JavaScript-basierten Emulationen.\",\"\u003Cstrong>Barrierefreiheit (Accessibility):\u003C\u002Fstrong> Die native Implementierung kann besser mit assistierenden Technologien interagieren, sofern die entsprechenden ARIA-Attribute korrekt gesetzt werden.\",\"\u003Cstrong>Datenübertragung (Data Transfer):\u003C\u002Fstrong> Die API bietet ein dediziertes `DataTransfer`-Objekt, das es ermöglicht, MIME-typisierte Daten (z. B. Text, URLs oder benutzerdefinierte Daten) während des Ziehvorgangs zu speichern und am Zielort abzurufen.\"],\"style\":\"unordered\"},\"type\":\"list\"},{\"data\":{\"text\":\"Technische Details und Event-Handling\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"Die Implementierung erfordert die Überwachung und Steuerung von mindestens sechs zentralen Ereignissen. Das Herzstück der Funktionalität ist das `DataTransfer`-Objekt, das über die Ereignisobjekte zugänglich ist und als temporärer Speicher für die zu verschiebenden Informationen dient.\"},\"type\":\"paragraph\"},{\"data\":{},\"type\":\"delimiter\"},{\"data\":{\"text\":\"Die Schlüsselereignisse des Drag-and-Drop-Zyklus\",\"level\":4},\"type\":\"header\"},{\"data\":{\"text\":\"\u003Cstrong>1. dragstart:\u003C\u002Fstrong> Dieses Ereignis wird ausgelöst, sobald der Benutzer beginnt, das Element zu ziehen. Hier muss die zu übertragende Information im `dataTransfer`-Objekt gespeichert werden, typischerweise unter Verwendung von `event.dataTransfer.setData(format, data)`. Für die Neuanordnung eines Menüs könnte dies die ID des gezogenen Elements sein.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>2. dragover:\u003C\u002Fstrong> Dieses Ereignis wird kontinuierlich ausgelöst, während das gezogene Element über ein potenzielles Ziel bewegt wird. Um das Ablegen zu ermöglichen, muss die Standardaktion des Browsers explizit unterdrückt werden, meist durch `event.preventDefault()`. Dies signalisiert dem Browser, dass die Zone ein gültiges Drop-Target ist.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>3. drop:\u003C\u002Fstrong> Dieses Ereignis tritt ein, wenn das Element erfolgreich über dem Ziel losgelassen wird. Hier wird die im `dragstart` gespeicherte Information mittels `event.dataTransfer.getData(format)` abgerufen. Anschließend erfolgt die eigentliche DOM-Manipulation, beispielsweise das Verschieben des Menüpunkts an die neue Position in der Liste.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>4. dragend:\u003C\u002Fstrong> Dieses Ereignis wird ausgelöst, wenn der Ziehvorgang abgeschlossen ist, unabhängig davon, ob das Ablegen erfolgreich war oder abgebrochen wurde. Es dient primär zur Bereinigung, wie dem Zurücksetzen von visuellen Zuständen oder dem Entfernen temporärer Klassen.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Einsatz von TypeScript\",\"level\":4},\"type\":\"header\"},{\"data\":{\"text\":\"Bei der Arbeit mit komplexen Event-Systemen, wie dem Drag-and-Drop API, bietet TypeScript erhebliche Vorteile. Die korrekte Typisierung der Ereignisobjekte (z. B. `DragEvent` anstelle des generischen `Event`) stellt sicher, dass Entwickler direkt auf das `dataTransfer`-Objekt zugreifen können, ohne Laufzeitfehler zu riskieren. Dies erhöht die Codequalität und die Wartbarkeit, insbesondere in größeren Projekten, die auf Vanilla JavaScript basieren.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Anwendungsfälle: Interaktive Menüs und mehr\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"Die Fähigkeit, Elemente dynamisch neu anzuordnen, ist für viele moderne Webanwendungen unerlässlich. Das Beispiel der Menüstruktur ist hierbei ein klassischer Anwendungsfall. Wenn ein Content-Management-System (CMS) die Bearbeitung der Navigationsreihenfolge zulässt, wird Drag-and-Drop verwendet, um die Reihenfolge der Listenelemente (Menüpunkte) visuell zu manipulieren.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Weitere typische Anwendungen umfassen:\"},\"type\":\"paragraph\"},{\"data\":{\"items\":[\"\u003Cstrong>Kanban-Boards:\u003C\u002Fstrong> Verschieben von Aufgabenkarten zwischen verschiedenen Spalten (Statusänderung).\",\"\u003Cstrong>Dateimanager:\u003C\u002Fstrong> Verschieben von Dateien oder Ordnern zwischen Verzeichnissen.\",\"\u003Cstrong>E-Commerce-Konfiguratoren:\u003C\u002Fstrong> Anordnen von Produktkomponenten oder Personalisierungselementen.\",\"\u003Cstrong>Playlist-Editoren:\u003C\u002Fstrong> Ändern der Wiedergabereihenfolge von Mediendateien.\"],\"style\":\"unordered\"},\"type\":\"list\"},{\"data\":{\"text\":\"In all diesen Szenarien ist die JavaScript-Logik nach dem `drop`-Ereignis dafür verantwortlich, nicht nur das DOM zu aktualisieren, sondern auch die zugrunde liegenden Datenstrukturen (z. B. ein Array oder eine Datenbank) zu synchronisieren, um die Persistenz der neuen Anordnung zu gewährleisten.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Fazit und Ausblick\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"Die native HTML5 Drag-and-Drop API bietet eine robuste und performante Grundlage für die Implementierung komplexer Interaktionen in JavaScript. Obwohl die API eine präzise Steuerung des Event-Flusses erfordert – insbesondere die Unterdrückung der Standardaktion bei `dragover` und die Nutzung des `DataTransfer`-Objekts – liefert sie die notwendigen Werkzeuge, um interaktive Elemente wie dynamische Menüstrukturen effizient zu realisieren.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Die Beherrschung des `DataTransfer`-Objekts und der korrekten Event-Kette ist der Schlüssel zur erfolgreichen Implementierung von nativem Drag-and-Drop in modernen Webanwendungen.\",\"caption\":\"Technische Schlussfolgerung\"},\"type\":\"quote\"}],\"version\":\"2.31\"}",{"time":211,"blocks":212,"version":309},1701198000,[213,217,221,224,228,231,234,237,240,249,252,255,258,261,264,267,270,273,276,279,282,285,288,295,298,301,304],{"data":214,"type":41},{"text":215,"level":216},"Einführung in das native Drag-and-Drop in JavaScript",2,{"data":218,"type":220},{"text":219},"Interaktive Benutzeroberflächen (UIs) sind ein fundamentaler Bestandteil moderner Webanwendungen. Die Möglichkeit, Elemente per Drag-and-Drop zu verschieben, verbessert die Benutzererfahrung signifikant, insbesondere bei der Verwaltung von Listen, Menüs oder der Organisation von Inhalten. Während in der Vergangenheit oft komplexe Bibliotheken oder Frameworks zur Implementierung dieser Funktionalität notwendig waren, bietet die native HTML5 Drag-and-Drop API eine standardisierte, leistungsstarke Lösung, die direkt in Vanilla JavaScript genutzt werden kann.","paragraph",{"data":222,"type":220},{"text":223},"Dieser Artikel dient als technische Analyse und Demonstration der Prinzipien, die hinter der Implementierung von Drag-and-Drop-Funktionalität in JavaScript stehen. Der Fokus liegt auf der präzisen Steuerung des Datenflusses und der Event-Behandlung, die notwendig ist, um beispielsweise eine dynamische Menüstruktur neu anzuordnen.",{"data":225,"type":41},{"text":226,"level":227},"Grundlagen des HTML5 Drag-and-Drop API",3,{"data":229,"type":220},{"text":230},"Die native Drag-and-Drop API basiert auf einer Reihe von DOM-Ereignissen und dem globalen Attribut `draggable`. Um ein Element verschiebbar zu machen, muss dieses Attribut auf `true` gesetzt werden. Die Interaktion gliedert sich in zwei Hauptbereiche: das ziehende Element (Drag Source) und das ablegbare Ziel (Drop Target).",{"data":232,"type":220},{"text":233},"Der Prozess des Ziehens und Ablegens wird durch eine definierte Kette von Ereignissen gesteuert, die präzise behandelt werden müssen, um die gewünschte Funktionalität zu gewährleisten. Insbesondere die korrekte Behandlung des `dragover`-Ereignisses ist entscheidend, da Browser standardmäßig das Ablegen von Elementen verhindern.",{"data":235,"type":41},{"text":236,"level":227},"Vorteile der nativen Implementierung",{"data":238,"type":220},{"text":239},"Die Entscheidung für die native HTML5 API gegenüber externen Bibliotheken bietet mehrere technische und architektonische Vorteile:",{"data":241,"type":248},{"items":242,"style":247},[243,244,245,246],"\u003Cstrong>Standardisierung und Browser-Kompatibilität:\u003C\u002Fstrong> Die API ist ein Webstandard, der von allen modernen Browsern nativ unterstützt wird, was die Notwendigkeit von Polyfills reduziert.","\u003Cstrong>Performance:\u003C\u002Fstrong> Da die Funktionalität nativ im Browser implementiert ist, ist die Performance in der Regel höher als bei JavaScript-basierten Emulationen.","\u003Cstrong>Barrierefreiheit (Accessibility):\u003C\u002Fstrong> Die native Implementierung kann besser mit assistierenden Technologien interagieren, sofern die entsprechenden ARIA-Attribute korrekt gesetzt werden.","\u003Cstrong>Datenübertragung (Data Transfer):\u003C\u002Fstrong> Die API bietet ein dediziertes `DataTransfer`-Objekt, das es ermöglicht, MIME-typisierte Daten (z. B. Text, URLs oder benutzerdefinierte Daten) während des Ziehvorgangs zu speichern und am Zielort abzurufen.","unordered","list",{"data":250,"type":41},{"text":251,"level":227},"Technische Details und Event-Handling",{"data":253,"type":220},{"text":254},"Die Implementierung erfordert die Überwachung und Steuerung von mindestens sechs zentralen Ereignissen. Das Herzstück der Funktionalität ist das `DataTransfer`-Objekt, das über die Ereignisobjekte zugänglich ist und als temporärer Speicher für die zu verschiebenden Informationen dient.",{"data":256,"type":257},{},"delimiter",{"data":259,"type":41},{"text":260,"level":45},"Die Schlüsselereignisse des Drag-and-Drop-Zyklus",{"data":262,"type":220},{"text":263},"\u003Cstrong>1. dragstart:\u003C\u002Fstrong> Dieses Ereignis wird ausgelöst, sobald der Benutzer beginnt, das Element zu ziehen. Hier muss die zu übertragende Information im `dataTransfer`-Objekt gespeichert werden, typischerweise unter Verwendung von `event.dataTransfer.setData(format, data)`. Für die Neuanordnung eines Menüs könnte dies die ID des gezogenen Elements sein.",{"data":265,"type":220},{"text":266},"\u003Cstrong>2. dragover:\u003C\u002Fstrong> Dieses Ereignis wird kontinuierlich ausgelöst, während das gezogene Element über ein potenzielles Ziel bewegt wird. Um das Ablegen zu ermöglichen, muss die Standardaktion des Browsers explizit unterdrückt werden, meist durch `event.preventDefault()`. Dies signalisiert dem Browser, dass die Zone ein gültiges Drop-Target ist.",{"data":268,"type":220},{"text":269},"\u003Cstrong>3. drop:\u003C\u002Fstrong> Dieses Ereignis tritt ein, wenn das Element erfolgreich über dem Ziel losgelassen wird. Hier wird die im `dragstart` gespeicherte Information mittels `event.dataTransfer.getData(format)` abgerufen. Anschließend erfolgt die eigentliche DOM-Manipulation, beispielsweise das Verschieben des Menüpunkts an die neue Position in der Liste.",{"data":271,"type":220},{"text":272},"\u003Cstrong>4. dragend:\u003C\u002Fstrong> Dieses Ereignis wird ausgelöst, wenn der Ziehvorgang abgeschlossen ist, unabhängig davon, ob das Ablegen erfolgreich war oder abgebrochen wurde. Es dient primär zur Bereinigung, wie dem Zurücksetzen von visuellen Zuständen oder dem Entfernen temporärer Klassen.",{"data":274,"type":41},{"text":275,"level":45},"Einsatz von TypeScript",{"data":277,"type":220},{"text":278},"Bei der Arbeit mit komplexen Event-Systemen, wie dem Drag-and-Drop API, bietet TypeScript erhebliche Vorteile. Die korrekte Typisierung der Ereignisobjekte (z. B. `DragEvent` anstelle des generischen `Event`) stellt sicher, dass Entwickler direkt auf das `dataTransfer`-Objekt zugreifen können, ohne Laufzeitfehler zu riskieren. Dies erhöht die Codequalität und die Wartbarkeit, insbesondere in größeren Projekten, die auf Vanilla JavaScript basieren.",{"data":280,"type":41},{"text":281,"level":227},"Anwendungsfälle: Interaktive Menüs und mehr",{"data":283,"type":220},{"text":284},"Die Fähigkeit, Elemente dynamisch neu anzuordnen, ist für viele moderne Webanwendungen unerlässlich. Das Beispiel der Menüstruktur ist hierbei ein klassischer Anwendungsfall. Wenn ein Content-Management-System (CMS) die Bearbeitung der Navigationsreihenfolge zulässt, wird Drag-and-Drop verwendet, um die Reihenfolge der Listenelemente (Menüpunkte) visuell zu manipulieren.",{"data":286,"type":220},{"text":287},"Weitere typische Anwendungen umfassen:",{"data":289,"type":248},{"items":290,"style":247},[291,292,293,294],"\u003Cstrong>Kanban-Boards:\u003C\u002Fstrong> Verschieben von Aufgabenkarten zwischen verschiedenen Spalten (Statusänderung).","\u003Cstrong>Dateimanager:\u003C\u002Fstrong> Verschieben von Dateien oder Ordnern zwischen Verzeichnissen.","\u003Cstrong>E-Commerce-Konfiguratoren:\u003C\u002Fstrong> Anordnen von Produktkomponenten oder Personalisierungselementen.","\u003Cstrong>Playlist-Editoren:\u003C\u002Fstrong> Ändern der Wiedergabereihenfolge von Mediendateien.",{"data":296,"type":220},{"text":297},"In all diesen Szenarien ist die JavaScript-Logik nach dem `drop`-Ereignis dafür verantwortlich, nicht nur das DOM zu aktualisieren, sondern auch die zugrunde liegenden Datenstrukturen (z. B. ein Array oder eine Datenbank) zu synchronisieren, um die Persistenz der neuen Anordnung zu gewährleisten.",{"data":299,"type":41},{"text":300,"level":227},"Fazit und Ausblick",{"data":302,"type":220},{"text":303},"Die native HTML5 Drag-and-Drop API bietet eine robuste und performante Grundlage für die Implementierung komplexer Interaktionen in JavaScript. Obwohl die API eine präzise Steuerung des Event-Flusses erfordert – insbesondere die Unterdrückung der Standardaktion bei `dragover` und die Nutzung des `DataTransfer`-Objekts – liefert sie die notwendigen Werkzeuge, um interaktive Elemente wie dynamische Menüstrukturen effizient zu realisieren.",{"data":305,"type":308},{"text":306,"caption":307},"Die Beherrschung des `DataTransfer`-Objekts und der korrekten Event-Kette ist der Schlüssel zur erfolgreichen Implementierung von nativem Drag-and-Drop in modernen Webanwendungen.","Technische Schlussfolgerung","quote","2.31","Die Implementierung von Drag-and-Drop-Funktionalität ist entscheidend für moderne, interaktive Benutzeroberflächen. Dieser Artikel beleuchtet die technische Umsetzung mithilfe der nativen HTML5 Drag-and-Drop API in Vanilla JavaScript und TypeScript, fokussiert auf die Erstellung dynamischer Menüstrukturen.","\u002Fuploads\u002F2024\u002F05\u002FDALL·E-2024-05-22-07.16.12-A-modern-web-application-interface-showing-a-drag-and-drop-list-in-a-container-with-Bootstrap-5-styling.-The-list-items-should-be-displayed-as-cards-t-large.webp","DALL·E-2024-05-22-07.16.12-A-modern-web-application-interface-showing-a-drag-and-drop-list-in-a-container-with-Bootstrap-5-styling.-The-list-items-should-be-displayed-as-cards-t-large","PUBLISHED","2024-05-22T05:14:00.000Z","2024-05-22T07:14:55.000Z","2025-12-27T23:30:13.324Z",{"en":318,"de":319,"sr":320,"es":321,"fr":322,"it":323,"ru":324},"\u002Fblog\u002Fdrag-and-drop-beispiel","\u002Fde\u002Fblog\u002Fdrag-and-drop-beispiel","\u002Fsr\u002Fblog\u002Fdrag-and-drop-beispiel","\u002Fes\u002Fblog\u002Fdrag-and-drop-beispiel","\u002Ffr\u002Fblog\u002Fdrag-and-drop-beispiel","\u002Fit\u002Fblog\u002Fdrag-and-drop-beispiel","\u002Fru\u002Fblog\u002Fdrag-and-drop-beispiel",[],{"id":327,"login":328,"email":329,"displayName":330},"20","rooth8233","aleksandar@stajic.de","Aleksandar Stajić",[332,391],{"lang":7,"title":207,"content":209,"contentJson":333,"excerpt":310},{"time":211,"blocks":334,"version":309},[335,337,339,341,343,345,347,349,351,354,356,358,360,362,364,366,368,370,372,374,376,378,380,383,385,387,389],{"data":336,"type":41},{"text":215,"level":216},{"data":338,"type":220},{"text":219},{"data":340,"type":220},{"text":223},{"data":342,"type":41},{"text":226,"level":227},{"data":344,"type":220},{"text":230},{"data":346,"type":220},{"text":233},{"data":348,"type":41},{"text":236,"level":227},{"data":350,"type":220},{"text":239},{"data":352,"type":248},{"items":353,"style":247},[243,244,245,246],{"data":355,"type":41},{"text":251,"level":227},{"data":357,"type":220},{"text":254},{"data":359,"type":257},{},{"data":361,"type":41},{"text":260,"level":45},{"data":363,"type":220},{"text":263},{"data":365,"type":220},{"text":266},{"data":367,"type":220},{"text":269},{"data":369,"type":220},{"text":272},{"data":371,"type":41},{"text":275,"level":45},{"data":373,"type":220},{"text":278},{"data":375,"type":41},{"text":281,"level":227},{"data":377,"type":220},{"text":284},{"data":379,"type":220},{"text":287},{"data":381,"type":248},{"items":382,"style":247},[291,292,293,294],{"data":384,"type":220},{"text":297},{"data":386,"type":41},{"text":300,"level":227},{"data":388,"type":220},{"text":303},{"data":390,"type":308},{"text":306,"caption":307},{"lang":392,"title":393,"content":394,"contentJson":395,"excerpt":446},"en","Drag-and-Drop with JavaScript: A Deep Analysis of the Native API for Interactive Menu Structures","{\"time\":1701198000,\"blocks\":[{\"data\":{\"text\":\"Introduction to Native Drag-and-Drop in JavaScript\",\"level\":2},\"type\":\"header\"},{\"data\":{\"text\":\"Interactive user interfaces (UIs) are a fundamental component of modern web applications. The ability to move elements via drag-and-drop significantly improves the user experience, especially when managing lists, menus, or organizing content. While in the past complex libraries or frameworks were often necessary for implementing this functionality, the native HTML5 Drag-and-Drop API offers a standardized, high-performance solution that can be used directly with Vanilla JavaScript.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"This article serves as a technical analysis and demonstration of the principles behind implementing drag-and-drop functionality in JavaScript. The focus is on precise control over data flow and event handling necessary to, for example, reorder a dynamic menu structure.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Basics of the HTML5 Drag-and-Drop API\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"The native drag-and-drop API is based on a series of DOM events and the global attribute `draggable`. To make an element draggable, this attribute must be set to `true`. The interaction breaks down into two main areas: the dragging source (Drag Source) and the drop target (Drop Target).\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"The process of dragging and dropping is controlled by a defined chain of events that need to be handled precisely to ensure the desired functionality. In particular, the correct handling of the `dragover` event is crucial as browsers typically prevent elements from being dropped by default.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Benefits of Native Implementation\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"Choosing the native HTML5 API over external libraries offers several technical and architectural advantages:\"},\"type\":\"paragraph\"},{\"data\":{\"items\":[\"\u003Cstrong>Standardization and Browser Compatibility:\u003C\u002Fstrong> The API is a web standard supported natively by all modern browsers, reducing the need for polyfills.\",\"\u003Cstrong>Performance:\u003C\u002Fstrong> As the functionality is implemented natively in the browser, performance is generally higher than with JavaScript-based emulations.\",\"\u003Cstrong>Accessibility (A11y):\u003C\u002Fstrong> The native implementation can better interact with assistive technologies if the appropriate ARIA attributes are set correctly.\",\"\u003Cstrong>Data Transfer:\u003C\u002Fstrong> The API provides a dedicated `DataTransfer` object that allows MIME-typed data (e.g., text, URLs or custom data) to be stored and retrieved during the drag operation.\"],\"style\":\"unordered\"},\"type\":\"list\"},{\"data\":{\"text\":\"Technical Details and Event Handling\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"The implementation requires monitoring and controlling at least six central events. The heart of the functionality is the `DataTransfer` object, which is accessible via event objects and serves as a temporary storage for the information to be moved.\"},\"type\":\"paragraph\"},{\"data\":{},\"type\":\"delimiter\"},{\"data\":{\"text\":\"Key Events in the Drag-and-Drop Cycle\",\"level\":4},\"type\":\"header\"},{\"data\":{\"text\":\"\u003Cstrong>1. dragstart:\u003C\u002Fstrong> This event is triggered when the user begins dragging an element. Here, the information to be transferred must be stored in the `dataTransfer` object, typically using `event.dataTransfer.setData(format, data)`. For reordering a menu, this could be the ID of the dragged element.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>2. dragover:\u003C\u002Fstrong> This event is continuously triggered while the dragged element is moved over a potential target. To allow dropping, the default action of the browser must be explicitly prevented, usually by `event.preventDefault()`. This signals to the browser that the zone is a valid drop target.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>3. drop:\u003C\u002Fstrong> This event occurs when the element is successfully released over the target. Here, the information stored during `dragstart` is retrieved via `event.dataTransfer.getData(format)`. Subsequently, the actual DOM manipulation takes place, such as moving the menu item to its new position in the list.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>4. dragend:\u003C\u002Fstrong> This event is triggered when the dragging operation is completed, regardless of whether dropping was successful or aborted. It primarily serves for cleanup, such as resetting visual states or removing temporary classes.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Use of TypeScript\",\"level\":4},\"type\":\"header\"},{\"data\":{\"text\":\"When working with complex event systems like the Drag-and-Drop API, TypeScript offers significant advantages. Correctly typing the event objects (e.g., `DragEvent` instead of the generic `Event`) ensures that developers can directly access the `dataTransfer` object without risking runtime errors. This increases code quality and maintainability, especially in larger projects based on Vanilla JavaScript.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Use Cases: Interactive Menus and More\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"The ability to dynamically reorder elements is essential for many modern web applications. The example of a menu structure is a classic use case here. If a content management system (CMS) allows editing the navigation order, drag-and-drop is used to visually manipulate the order of list items (menu points).\"\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Further typical applications include:\"},\"type\":\"paragraph\"},{\"data\":{\"items\":[\"\u003Cstrong>Kanban Boards:\u003C\u002Fstrong> Moving task cards between different columns (status change).\",\"\u003Cstrong>File Managers:\u003C\u002Fstrong> Moving files or folders between directories.\",\"\u003Cstrong>E-Commerce Configurators:\u003C\u002Fstrong> Arranging product components or customization elements.\",\"\u003Cstrong>Playlist Editors:\u003C\u002Fstrong> Changing the playback order of media files.\"],\"style\":\"unordered\"},\"type\":\"list\"},{\"data\":{\"text\":\"In all these scenarios, the JavaScript logic after the `drop` event is responsible for not only updating the DOM but also synchronizing underlying data structures (e.g., an array or a database) to ensure persistence of the new arrangement.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Conclusion and Outlook\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"The native HTML5 Drag-and-Drop API provides a robust and high-performance foundation for implementing complex interactions in JavaScript. Although the API requires precise control over event flow – particularly suppressing the default action at `dragover` and using the `DataTransfer` object – it offers the necessary tools to efficiently realize interactive elements like dynamic menu structures.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Mastering the `DataTransfer` object and the correct event chain is key to successfully implementing native drag-and-drop in modern web applications.\",\"caption\":\"Technical Conclusion\"},\"type\":\"quote\"}],\"version\":\"2.31\"}",{"time":396,"blocks":397,"version":309},1766878193013,[398,402,406,410,414,418,422,426,430,434,438,442],{"id":399,"data":400,"type":220},"01dd050d903fcb9e",{"text":401},"Standardization and Browser Compatibility:",{"id":403,"data":404,"type":220},"9917f0a669c86dbb",{"text":405},"Performance:",{"id":407,"data":408,"type":220},"3d9ca1fe7cbb09aa",{"text":409},"Accessibility (A11y):",{"id":411,"data":412,"type":220},"68d79fc9715111dc",{"text":413},"Data Transfer:",{"id":415,"data":416,"type":220},"939fa84f857a360f",{"text":417},"1. dragstart:",{"id":419,"data":420,"type":220},"f0973cb9e0474b6f",{"text":421},"2. dragover:",{"id":423,"data":424,"type":220},"5e6fd33d47cbce7e",{"text":425},"3. drop:",{"id":427,"data":428,"type":220},"49bb52aafa18afe0",{"text":429},"4. dragend:",{"id":431,"data":432,"type":220},"b8e993098ff471b9",{"text":433},"Kanban Boards:",{"id":435,"data":436,"type":220},"832ed3df4e85e5c8",{"text":437},"File Managers:",{"id":439,"data":440,"type":220},"8d80f58bd66ea31c",{"text":441},"E-Commerce Configurators:",{"id":443,"data":444,"type":220},"a2dfe8c46ea3655e",{"text":445},"Playlist Editors:","Implementing drag-and-drop functionality is crucial for modern, interactive user interfaces. This article examines the technical implementation using the native HTML5 Drag-and-Drop API in Vanilla JavaScript and TypeScript, focusing on the creation of dynamic menu structures.","Post erfolgreich abgerufen",{"items":449,"source":534,"manualIds":535,"manualMatchedIds":536},[450,457,464,471,478,485,492,499,506,513,520,527],{"id":451,"slug":452,"title":453,"excerpt":454,"featuredImage":455,"publishedAt":456},"9","ubuntu-graphics-stack-transition-hybrid-gpu-boot-crashes-wayland-risks-and-stable-deployment-practices","Ubuntu Grafik-Stack-Umstellung: Hybrid-GPU Boot-Abstürze, Wayland-Risiken und Stabile Bereitstellungspraktiken","Ubuntu-Desktop-Upgrades können Boot-Hänger, fehlende Anmeldesitzungen und instabiles Rendering auslösen – insbesondere auf hybriden Intel- + NVIDIA-Systemen. Dieser Artikel erklärt den zugrunde liegenden Grafik-Stack-Übergang, warum Regressionen auftreten und wie Ubuntu sicher unter Verwendung von LTS-Baselines und validierten Treiberstrategien bereitgestellt werden kann.","\u002Fuploads\u002F2026\u002F01\u002Fchatgpt-image-jan-17-2026-05-23-25-pm-1768673754531-r4c498.webp","2026-01-18T19:14:00.000Z",{"id":458,"slug":459,"title":460,"excerpt":461,"featuredImage":462,"publishedAt":463},"10","portal-development-a-scalable-platform-for-performance-multilingual-support-and-extensibility","Portal-Entwicklung: Eine skalierbare Plattform für Leistung, Mehrsprachigkeitsunterstützung und Erweiterbarkeit","Ein modernes Webportal wird entwickelt, das auf Skalierbarkeit, Leistung, Mehrsprach","\u002Fuploads\u002F2026\u002F01\u002Fportal-development-a-scalable-platform-for-performance-multilingual-support-and-extensibility-1769006690165-vklvij.webp","2026-01-21T10:32:00.000Z",{"id":465,"slug":466,"title":467,"excerpt":468,"featuredImage":469,"publishedAt":470},"447","google-io-2026-antigravity-ai-studio-and-google-devtools","Google I\u002FO 2026: Antigravity, AI Studio und der Wandel zu agentischen DevTools","Google I\u002FO 2026 machte eines für Ingenieure klar: KI-Tooling bewegt sich über die Autovervollständigung hinaus hin zu verwalteter agentischer Ausführung. Dieser Artikel schlüsselt Antigravity 2.0, die wachsende Rolle von Google AI Studio, Gemini 3.5 Flash und die realen Kompromisse rund um Orchestrierung, Lock-in, Verifizierung und das Design von Entwickler-Workflows auf.","\u002Fuploads\u002F2026\u002F05\u002Fgoogle-io-2026-antigravity-ai-studio-and-google-devtools-1779227878312-e1yvs3.webp","2026-05-21T10:52:00.000Z",{"id":472,"slug":473,"title":474,"excerpt":475,"featuredImage":476,"publishedAt":477},"471","how-to-know-whether-an-ai-agent-actually-used-the-right-evidence","Wie man erkennt, ob ein KI-Agent tatsächlich die richtigen Belege verwendet hat","Ein KI-Agent kann Quellen zitieren und trotzdem die falschen Belege verwenden. Dieser Artikel stellt eine praktische Methode zur Überprüfung der Belegung von Behauptungen, der Quellenautorität, der Anwendbarkeit, der Herkunft sowie der Frage vor, ob die Belege die Antwort tatsächlich beeinflusst haben.","\u002Fuploads\u002F2026\u002F09\u002Fhow-to-know-whether-an-ai-agent-actually-used-the-right-evidence-1790351317188-o5z9ve.webp","2026-09-25T11:47:00.000Z",{"id":479,"slug":480,"title":481,"excerpt":482,"featuredImage":483,"publishedAt":484},"452","zbt-z8102ax-5g-openwrt-router-review-dual-sim-rm500u-ea-and-an-honest-assessment","ZBT Z8102AX 5G OpenWrt Router Test: Dual-SIM, RM500U-EA und eine ehrliche Einschätzung","Der ZBT Z8102AX ist ein ungewöhnlicher 5G-Router mit einer OpenWrt-Basis, einem Dual-SIM-Konzept und einem Quectel RM500U-EA-Modem. Im Test zeigt er klare Stärken bei Flexibilität, Schnittstellen und mobiler Konnektivität, aber auch die typischen Schwächen eines vom Hersteller modifizierten OpenWrt-Builds.","\u002Fuploads\u002F2026\u002F06\u002Fopenwrt-router-review-dual-sim-01-1781620588908-fwmzj7.webp","2026-06-16T07:34:00.000Z",{"id":486,"slug":487,"title":488,"excerpt":489,"featuredImage":490,"publishedAt":491},"456","zbt-z8102ax-hardware-packaging-review","ZBT Z8102AX Hardware- und Verpackungs-Review: Starker Router, schwache Box","Der ZBT Z8102AX macht einen soliden ersten Eindruck als schlanker, schwarzer 5G-OpenWrt-Router aus Metall mit mehreren Antennenanschlüssen, Dual-SIM-Slots, USB- und LAN\u002FWAN-Ports und einem praktischen Zubehörset. Die Hardware fühlt sich nützlich und seriös an, aber die Verpackung ist eindeutig die Schwachstelle.","\u002Fuploads\u002F2026\u002F06\u002Fopenwrt-router-review-dual-sim-02-1781620590938-y33j4b.webp","2026-06-16T04:40:00.000Z",{"id":493,"slug":494,"title":495,"excerpt":496,"featuredImage":497,"publishedAt":498},"381","enterprise-grade-multi-tenant-architecture-for-an-international-platform","Unternehmensfähige mandantenfähige Architektur für eine internationale Plattform","Loving Rocks ist eine Hochzeitsplattform auf Unternehmensniveau, konzipiert mit einer echten Mehrmandantenarchitektur, isolierten Datenbanken pro Mandant und integrierter Internationalisierung für globale Skalierbarkeit, Sicherheit und langfristige Betriebsstabilität.","\u002Fuploads\u002F2026\u002F01\u002Fenterprise-grade-multi-tenant-architecture-for-an-international-platform-1769789121298-b6v7ak.webp","2026-01-30T12:04:00.000Z",{"id":500,"slug":501,"title":502,"excerpt":503,"featuredImage":504,"publishedAt":505},"473","openai-agents-api-vs-agents-sdk-vs-responses-api-what-should-you-build-on-in-2026","OpenAI Agents API vs. Agents SDK vs. Responses API: Worauf sollten Sie 2026 aufbauen?","Der Agent-Stack von OpenAI hat sich im September 2026 geändert. Dieser Architekturleitfaden unterscheidet die Agents API, das Agents SDK, die Responses API und das Codex SDK nach Runtime-Ownership—sodass Teams die richtige Kontrollgrenze wählen können, anstatt Produktnamen zu vergleichen.","\u002Fuploads\u002F2026\u002F09\u002Fopenai-agents-api-vs-agents-sdk-vs-responses-api-what-should-you-build-on-in-2026-1790351846714-zi7lus.webp","2026-09-25T11:56:00.000Z",{"id":507,"slug":508,"title":509,"excerpt":510,"featuredImage":511,"publishedAt":512},"474","migrating-from-openai-agents-sdk-to-the-agents-api-what-actually-changes-architecturally","Migration vom OpenAI Agents SDK zur Agents API: Was ändert sich tatsächlich architektonisch?","Die Migration vom OpenAI Agents SDK zur neuen Agents API ist keine reine Umbenennung von Imports. Die Laufzeitgrenze verschiebt sich: Die Agent-Schleife, die dauerhafte Sitzung, die Orchestrierung, die Kontextkomprimierung und die Wiederherstellung bewegen sich in Richtung einer verwalteten Harness. Dieser Leitfaden zeigt, was verschoben werden sollte, was in Ihrer Anwendung bleiben sollte und wie Sie die Migration vor dem Cutover nachweisen können.","\u002Fuploads\u002F2026\u002F09\u002Fmigrating-from-openai-agents-sdk-to-the-agents-api-what-actually-changes-architecturally-1790352171968-ienxr9.webp","2026-09-25T12:01:00.000Z",{"id":514,"slug":515,"title":516,"excerpt":517,"featuredImage":518,"publishedAt":519},"383","canonical-architecture-url-design-resolver-logic-api-scalability-specification","Kanonische Architektur, URL-Design, Resolver-Logik, API- & Skalierbarkeitsspezifikation","Geobasierte Erkennungsarchitektur für Mehrmandantenportale. Definiert kanonische URLs, Resolver-Logik, Caching-Strategie und ein Geo-Read-Modell ohne CMS-Kopplung oder Datenbank-Refactoring. Konzipiert für SEO-Stabilität, Skalierbarkeit und zukünftige Erweiterungen wie Buchung und Karten.","\u002Fuploads\u002F2026\u002F01\u002Fcanonical-architecture-url-design-resolver-logic-api-scalability-specification-1769890763607-7rghbp.webp","2026-01-31T06:12:00.000Z",{"id":521,"slug":522,"title":523,"excerpt":524,"featuredImage":525,"publishedAt":526},"374","databasemarketing","Databasemarketing – Moderner Ansatz für Kundenbeziehungen","Moderner Überblick über Databasemarketing: von Datenstrategie und technischer Architektur bis hin zu Automatisierung, DSGVO und Best Practices für nachhaltige Kundenbeziehungen.","\u002Fuploads\u002F2025\u002F01\u002FDatabasemarketing.png-medium.webp","2025-01-06T00:15:00.000Z",{"id":528,"slug":529,"title":530,"excerpt":531,"featuredImage":532,"publishedAt":533},"453","zbt-z8102ax-openwrt-2102-firmware-review","ZBT Z8102AX OpenWrt 21.02 Firmware-Test: Stabil genug, aber ist sie zukunftssicher?","Der ZBT Z8102AX läuft mit einem herstellermodifizierten OpenWrt 21.02-Build mit Kernel 5.4.246. Im praktischen Test funktionierte die Firmware erfolgreich und hielt den Router mehrere Tage lang stabil, aber die alte Basis wirft wichtige Fragen zu Sicherheit, Modemsteuerung, Upgrade-Pfaden und langfristiger Wartbarkeit auf.","\u002Fuploads\u002F2026\u002F06\u002Fopenwrt-router-review-dual-sim-04-1781620594653-uvf5oy.webp","2026-06-16T10:39:00.000Z","fallback",[],[]]