[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"portal-settings:stajic:it":3,"public-menus:all":38,"post:drag-and-drop-beispiel:it":205,"related:post:drag-and-drop-beispiel:it:1":449},{"statusCode":4,"data":5,"message":37},200,{"tenantId":6,"lang":7,"defaultLang":8,"siteUrl":9,"contactEmail":10,"brandName":11,"logoUrl":12,"siteName":11,"siteDescription":13,"ogImage":10,"robotsIndex":14,"socialLinks":10,"reservedSlugs":10,"seoPolicy":15},"stajic","it","de","https:\u002F\u002Fstajic.de",null,"Stajic Platform","\u002FLogo_Planet.svg","Stajic Portal",true,{"branding":16,"relatedContent":17,"crossDomainLinks":18},{"logoUrl":12},{"enabled":14},[19,22,25,28,31,34],{"url":20,"label":21,"isActive":14,"showInFooter":14,"includeInSameAs":14},"https:\u002F\u002Ffigure.rocks","figure.rocks",{"url":23,"label":24,"isActive":14,"showInFooter":14,"includeInSameAs":14},"https:\u002F\u002Floving.rocks","loving.rocks",{"url":26,"label":27,"isActive":14,"showInFooter":14,"includeInSameAs":14},"https:\u002F\u002Fbazify.com","bazify.com",{"url":29,"label":30,"isActive":14,"showInFooter":14,"includeInSameAs":14},"https:\u002F\u002Fbazify.de","bazify.de",{"url":32,"label":33,"isActive":14,"showInFooter":14,"includeInSameAs":14},"https:\u002F\u002Fbazify.at","bazify.at",{"url":35,"label":36,"isActive":14,"showInFooter":14,"includeInSameAs":14},"https:\u002F\u002Fbazify.ba","bazify.ba","Portal settings resolved",[39,45],{"id":40,"name":41,"location":42,"isActive":14,"isDefault":43,"items":44},1,"main-navigation","header",false,[],{"id":46,"name":47,"location":48,"isActive":14,"isDefault":14,"items":49},4,"main-menu","sidebar",[50,66,79,93,103,118,133],{"id":51,"title":52,"url":60,"target":61,"icon":62,"isActive":14,"type":63,"productId":10,"categoryId":10,"shopCategoryId":10,"articleId":10,"pageId":64,"portfolioId":10,"children":65},"item-18",{"de":53,"en":54,"es":55,"fr":56,"it":54,"ru":57,"sr":58,"zh":59},"Startseite","Home","Inicio","Accueil","Главная","Почетна","首页","\u002Ffull-stack-web-developer-munich-performance-seo-and-maintainable-builds","_self","i-lucide-home","page",111,[],{"id":67,"title":68,"url":75,"target":61,"icon":76,"isActive":14,"type":63,"productId":10,"categoryId":10,"shopCategoryId":10,"articleId":10,"pageId":77,"portfolioId":10,"children":78},"item-22",{"de":69,"en":69,"es":70,"fr":69,"it":71,"ru":72,"sr":73,"zh":74},"Vision","Visión","Visione","Видение","Визија","想象","\u002Fueber-uns-webdesign-muenchen-webaplikation","i-lucide-eye",113,[],{"id":80,"title":81,"url":89,"target":61,"icon":90,"isActive":14,"type":63,"productId":10,"categoryId":10,"shopCategoryId":10,"articleId":10,"pageId":91,"portfolioId":10,"children":92},"item-19",{"de":82,"en":83,"es":84,"fr":83,"it":85,"ru":86,"sr":87,"zh":88},"Leistungen","Services","Servicios","Servizi","Услуги","Услуге","服务","\u002Fservices-dienstleistungen-muenchen","i-lucide-wrench",116,[],{"id":94,"title":95,"url":99,"target":61,"icon":100,"isActive":14,"type":63,"productId":10,"categoryId":10,"shopCategoryId":10,"articleId":10,"pageId":101,"portfolioId":10,"children":102},"item-23",{"de":96,"en":96,"es":96,"fr":96,"it":96,"ru":97,"sr":97,"zh":98},"Blog","Блог","博客","\u002Fblog","i-lucide-book-open",112,[],{"id":104,"title":105,"url":114,"target":61,"icon":115,"isActive":14,"type":63,"productId":10,"categoryId":10,"shopCategoryId":10,"articleId":10,"pageId":116,"portfolioId":10,"children":117},"item-32",{"de":106,"en":107,"es":108,"fr":109,"it":110,"ru":111,"sr":112,"zh":113},"Neue Technologien","New Technologies","Nuevas tecnologías","Nouvelles technologies","Nuove tecnologie","Новые технологии","Нове технологије","新技术！","\u002Fneue-webtechnologien","i-lucide-sparkles",122,[],{"id":119,"title":120,"url":129,"target":61,"icon":130,"isActive":14,"type":63,"productId":10,"categoryId":10,"shopCategoryId":10,"articleId":10,"pageId":131,"portfolioId":10,"children":132},"item-20",{"de":121,"en":122,"es":123,"fr":124,"it":125,"ru":126,"sr":127,"zh":128},"Kontakt","Contact us!","Contacto","Contact","Contatto","Контакт","Контактирајте нас","联系我们！","\u002Fcontact","i-lucide-mail",115,[],{"id":134,"title":135,"url":144,"target":61,"icon":145,"isActive":14,"type":63,"productId":10,"categoryId":10,"shopCategoryId":10,"articleId":10,"pageId":146,"portfolioId":10,"children":147},"item-21",{"de":136,"en":137,"es":138,"fr":139,"it":140,"ru":141,"sr":142,"zh":143},"Unsere Arbeit","Our Work","Nuestro trabajo","Nos réalisations","I nostri lavori","Наши работы","Наши радови","文件夹","\u002Fportfolio","i-lucide-briefcase",114,[148,161,175,181,193],{"id":149,"title":150,"url":144,"target":61,"icon":159,"isActive":14,"type":63,"productId":10,"categoryId":10,"shopCategoryId":10,"articleId":10,"pageId":146,"portfolioId":10,"children":160},"item-24",{"de":151,"en":152,"es":153,"fr":154,"it":155,"ru":156,"sr":157,"zh":158},"Alle Projekte","All Projects","Todos los proyectos","Tous les projets","Tutti i progetti","Все проекты","Сви пројекти","所有项目","i-lucide-grid-3x3",[],{"id":162,"title":163,"url":171,"target":61,"icon":172,"isActive":14,"type":173,"productId":10,"categoryId":10,"shopCategoryId":10,"articleId":10,"pageId":10,"portfolioId":10,"children":174},"item-29",{"de":164,"en":165,"es":166,"fr":167,"it":168,"ru":169,"sr":170,"zh":143},"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":176,"title":177,"url":179,"target":61,"icon":172,"isActive":14,"type":173,"productId":10,"categoryId":10,"shopCategoryId":10,"articleId":10,"pageId":10,"portfolioId":10,"children":180},"item-28",{"de":178,"en":178,"es":178,"fr":178,"it":178,"ru":178,"sr":178,"zh":178},"Solr Suggester","\u002Fportfolio\u002Fsolr-fuzzy-suggester-und-solr-infix-suggester-abfrage-ueber-ajax-und-filterung",[],{"id":182,"title":183,"url":191,"target":61,"icon":172,"isActive":14,"type":173,"productId":10,"categoryId":10,"shopCategoryId":10,"articleId":10,"pageId":10,"portfolioId":10,"children":192},"item-27",{"de":184,"en":185,"es":186,"fr":187,"it":188,"ru":189,"sr":190,"zh":185},"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":194,"title":195,"url":203,"target":61,"icon":172,"isActive":14,"type":173,"productId":10,"categoryId":10,"shopCategoryId":10,"articleId":10,"pageId":10,"portfolioId":10,"children":204},"item-31",{"de":196,"en":197,"es":198,"fr":199,"it":200,"ru":201,"sr":202,"zh":197},"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":206,"message":448},{"id":207,"title":208,"slug":209,"content":210,"contentJson":211,"excerpt":311,"featuredImage":312,"featuredImageAlt":313,"featuredImageCaption":10,"featuredImageTitle":10,"featuredImageCopyright":10,"featuredImageAuthor":10,"featuredImageSourceUrl":10,"featuredImageLicense":10,"featuredImageIsAiGenerated":43,"status":314,"publishedAt":315,"createdAt":316,"updatedAt":317,"seoLocalePaths":318,"categories":326,"author":327,"translations":332},"368","Trascinamento e rilascio con JavaScript: Una analisi approfondita dell'API nativa per strutture di menu interattivi","drag-and-drop-beispiel","{\"time\":1701198000,\"blocks\":[{\"data\":{\"text\":\"Introduzione al drag and drop nativo in JavaScript\",\"level\":2},\"type\":\"header\"},{\"data\":{\"text\":\"Le interfacce utente interattive (UI) sono un elemento fondamentale delle moderne applicazioni web. La possibilità di spostare gli elementi tramite il drag and drop migliora significativamente l'esperienza dell'utente, soprattutto nella gestione delle liste, dei menu o nell'organizzazione del contenuto. Mentre in passato erano spesso necessarie librerie o framework complessi per implementare questa funzionalità, l'API nativa HTML5 Drag and Drop offre una soluzione standardizzata e performante che può essere utilizzata direttamente con Vanilla JavaScript.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Questo articolo ha lo scopo di fornire un'analisi tecnica e una dimostrazione dei principi alla base dell'implementazione della funzionalità drag and drop in JavaScript. L'enfasi è sulla gestione precisa del flusso dei dati e degli eventi necessaria, ad esempio, per riorganizzare dinamicamente la struttura di un menu.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Nozioni di base dell'API HTML5 Drag and Drop\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"L'API nativa drag and drop si basa su una serie di eventi DOM e sull'attributo globale `draggable`. Per rendere un elemento spostabile, questo attributo deve essere impostato su `true`. L'interazione si suddivide in due aree principali: l'elemento da trascinare (Drag Source) e il destinatario di arrivo (Drop Target).\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Il processo di trascinamento e rilascio viene gestito da una catena definita di eventi che devono essere trattati con precisione per garantire la funzionalità desiderata. In particolare, il corretto handling dell'evento `dragover` è fondamentale, poiché i browser impediscono di default l'arrivo degli elementi.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Vantaggi della implementazione nativa\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"La scelta per l'API HTML5 nativa rispetto alle librerie esterne offre diversi vantaggi tecnici e architettonici:\"},\"type\":\"paragraph\"},{\"data\":{\"items\":[\"\u003Cstrong>Standardizzazione e compatibilità browser:\u003C\u002Fstrong> L'API è uno standard web che viene supportato nativamente da tutti i moderni browser, riducendo la necessità di polyfills.\",\"\u003Cstrong>Rendimento:\u003C\u002Fstrong> Poiché la funzionalità è implementata nativamente nel browser, il rendimento è generalmente più alto rispetto alle emulazioni basate su JavaScript.\",\"\u003Cstrong>Acessibilità (Accessibility):\u003C\u002Fstrong> L'implementazione nativa può interagire meglio con le tecnologie assistenti, a condizione che gli attributi ARIA corrispondenti siano impostati correttamente.\",\"\u003Cstrong>Trasferimento di dati (Data Transfer):\u003C\u002Fstrong> L'API offre un oggetto `DataTransfer` dedicato che consente di memorizzare e recuperare dati tipizzati MIME (ad esempio, testo, URL o dati personalizzati) durante il processo di trascinamento.\"],\"style\":\"unordered\"},\"type\":\"list\"},{\"data\":{\"text\":\"Dettagli tecnici e gestione degli eventi\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"L'implementazione richiede la supervisione e il controllo di almeno sei eventi centrali. Il cuore della funzionalità è l'oggetto `DataTransfer`, che è accessibile tramite gli oggetti degli eventi e funge da memoria temporanea per le informazioni da spostare.\"},\"type\":\"paragraph\"},{\"data\":{},\"type\":\"delimiter\"},{\"data\":{\"text\":\"Gli eventi chiave del ciclo drag and drop\",\"level\":4},\"type\":\"header\"},{\"data\":{\"text\":\"\u003Cstrong>1. dragstart:\u003C\u002Fstrong> Questo evento viene attivato non appena l'utente inizia a trascinare l'elemento. Qui è necessario memorizzare le informazioni da trasferire nell'oggetto `dataTransfer`, solitamente utilizzando `event.dataTransfer.setData(format, data)`. Per la riorganizzazione di un menu, potrebbe trattarsi dell'ID dell'elemento trascinato.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>2. dragover:\u003C\u002Fstrong> Questo evento viene attivato continuamente mentre l'elemento trascinato è sopra una destinazione potenziale. Per consentire il rilascio, la standard action del browser deve essere esplicitamente prevenuta, solitamente tramite `event.preventDefault()`. Ciò segnala al browser che la zona è un valido Drop Target.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>3. drop:\u003C\u002Fstrong> Questo evento si verifica quando l'elemento viene rilasciato con successo sopra il destinatario. Qui le informazioni memorizzate durante `dragstart` vengono recuperate tramite `event.dataTransfer.getData(format)`. Successivamente, avviene la manipolazione effettiva del DOM, ad esempio lo spostamento del punto di menu alla nuova posizione nella lista.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>4. dragend:\u003C\u002Fstrong> Questo evento viene attivato quando il processo di trascinamento è completato, indipendentemente dal fatto che il rilascio sia stato effettuato con successo o interrotto. Serve principalmente a pulire, come reimpostare stati visivi o rimuovere classi temporanee.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Uso di TypeScript\",\"level\":4},\"type\":\"header\"},{\"data\":{\"text\":\"Lavorando con sistemi di eventi complessi come l'API drag and drop, TypeScript offre vantaggi significativi. La corretta tipizzazione degli oggetti degli eventi (ad esempio `DragEvent` invece dell'eventuale `Event`) garantisce che i sviluppatori possano accedere direttamente all'oggetto `dataTransfer`, senza correre il rischio di errori di runtime. Questo migliora la qualità del codice e la manutenibilità, in particolare nei progetti più grandi basati su Vanilla JavaScript.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Casi d'uso: Menù interattivi e altro\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"La capacità di riordinare dinamicamente gli elementi è fondamentale per molte moderne applicazioni web. L'esempio della struttura del menu è qui un caso classico di utilizzo. Se un sistema di gestione del contenuto (CMS) consente la modifica dell'ordine di navigazione, il drag and drop viene utilizzato per manipolare visivamente l'ordinamento degli elementi elencati (punti del menù).\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Altri casi d'uso tipici includono:\"},\"type\":\"paragraph\"},{\"data\":{\"items\":[\"\u003Cstrong>Tabelloni Kanban:\u003C\u002Fstrong> Trascinare le carte delle attività tra colonne diverse (modifica dello stato).\",\"\u003Cstrong>Gestori di file:\u003C\u002Fstrong> Trascinare file o cartelle tra directory.\",\"\u003Cstrong>Configuratori e-commerce:\u003C\u002Fstrong> Ordinare componenti del prodotto o elementi di personalizzazione.\",\"\u003Cstrong>Editore di playlist:\u003C\u002Fstrong> Modificare l'ordine di riproduzione dei file multimediali.\"],\"style\":\"unordered\"},\"type\":\"list\"},{\"data\":{\"text\":\"In tutte queste situazioni, la logica JavaScript dopo l'evento `drop` è responsabile non solo dell'aggiornamento del DOM, ma anche della sincronizzazione delle strutture dati sottostanti (ad esempio un array o una base di dati) per garantire la persistenza dell'ordinamento nuovo.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Conclusione e prospettive\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"L'API nativa HTML5 Drag and Drop offre una solida e performante base per l'implementazione di interazioni complesse in JavaScript. Anche se l'API richiede una gestione precisa del flusso degli eventi – in particolare la prevenzione dell'azione standard durante `dragover` e l'utilizzo dell'oggetto `DataTransfer` – fornisce gli strumenti necessari per realizzare interattivi elementi come strutture di menu dinamici con efficienza.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"La padronanza dell'oggetto `DataTransfer` e della catena degli eventi corretta è la chiave per l'implementazione di drag and drop nativo in moderne applicazioni web.\",\"caption\":\"Conclusione tecnica\"},\"type\":\"quote\"}],\"version\":\"2.31\"}",{"time":212,"blocks":213,"version":310},1701198000,[214,218,222,225,229,232,235,238,241,250,253,256,259,262,265,268,271,274,277,280,283,286,289,296,299,302,305],{"data":215,"type":42},{"text":216,"level":217},"Introduzione al drag and drop nativo in JavaScript",2,{"data":219,"type":221},{"text":220},"Le interfacce utente interattive (UI) sono un elemento fondamentale delle moderne applicazioni web. La possibilità di spostare gli elementi tramite il drag and drop migliora significativamente l'esperienza dell'utente, soprattutto nella gestione delle liste, dei menu o nell'organizzazione del contenuto. Mentre in passato erano spesso necessarie librerie o framework complessi per implementare questa funzionalità, l'API nativa HTML5 Drag and Drop offre una soluzione standardizzata e performante che può essere utilizzata direttamente con Vanilla JavaScript.","paragraph",{"data":223,"type":221},{"text":224},"Questo articolo ha lo scopo di fornire un'analisi tecnica e una dimostrazione dei principi alla base dell'implementazione della funzionalità drag and drop in JavaScript. L'enfasi è sulla gestione precisa del flusso dei dati e degli eventi necessaria, ad esempio, per riorganizzare dinamicamente la struttura di un menu.",{"data":226,"type":42},{"text":227,"level":228},"Nozioni di base dell'API HTML5 Drag and Drop",3,{"data":230,"type":221},{"text":231},"L'API nativa drag and drop si basa su una serie di eventi DOM e sull'attributo globale `draggable`. Per rendere un elemento spostabile, questo attributo deve essere impostato su `true`. L'interazione si suddivide in due aree principali: l'elemento da trascinare (Drag Source) e il destinatario di arrivo (Drop Target).",{"data":233,"type":221},{"text":234},"Il processo di trascinamento e rilascio viene gestito da una catena definita di eventi che devono essere trattati con precisione per garantire la funzionalità desiderata. In particolare, il corretto handling dell'evento `dragover` è fondamentale, poiché i browser impediscono di default l'arrivo degli elementi.",{"data":236,"type":42},{"text":237,"level":228},"Vantaggi della implementazione nativa",{"data":239,"type":221},{"text":240},"La scelta per l'API HTML5 nativa rispetto alle librerie esterne offre diversi vantaggi tecnici e architettonici:",{"data":242,"type":249},{"items":243,"style":248},[244,245,246,247],"\u003Cstrong>Standardizzazione e compatibilità browser:\u003C\u002Fstrong> L'API è uno standard web che viene supportato nativamente da tutti i moderni browser, riducendo la necessità di polyfills.","\u003Cstrong>Rendimento:\u003C\u002Fstrong> Poiché la funzionalità è implementata nativamente nel browser, il rendimento è generalmente più alto rispetto alle emulazioni basate su JavaScript.","\u003Cstrong>Acessibilità (Accessibility):\u003C\u002Fstrong> L'implementazione nativa può interagire meglio con le tecnologie assistenti, a condizione che gli attributi ARIA corrispondenti siano impostati correttamente.","\u003Cstrong>Trasferimento di dati (Data Transfer):\u003C\u002Fstrong> L'API offre un oggetto `DataTransfer` dedicato che consente di memorizzare e recuperare dati tipizzati MIME (ad esempio, testo, URL o dati personalizzati) durante il processo di trascinamento.","unordered","list",{"data":251,"type":42},{"text":252,"level":228},"Dettagli tecnici e gestione degli eventi",{"data":254,"type":221},{"text":255},"L'implementazione richiede la supervisione e il controllo di almeno sei eventi centrali. Il cuore della funzionalità è l'oggetto `DataTransfer`, che è accessibile tramite gli oggetti degli eventi e funge da memoria temporanea per le informazioni da spostare.",{"data":257,"type":258},{},"delimiter",{"data":260,"type":42},{"text":261,"level":46},"Gli eventi chiave del ciclo drag and drop",{"data":263,"type":221},{"text":264},"\u003Cstrong>1. dragstart:\u003C\u002Fstrong> Questo evento viene attivato non appena l'utente inizia a trascinare l'elemento. Qui è necessario memorizzare le informazioni da trasferire nell'oggetto `dataTransfer`, solitamente utilizzando `event.dataTransfer.setData(format, data)`. Per la riorganizzazione di un menu, potrebbe trattarsi dell'ID dell'elemento trascinato.",{"data":266,"type":221},{"text":267},"\u003Cstrong>2. dragover:\u003C\u002Fstrong> Questo evento viene attivato continuamente mentre l'elemento trascinato è sopra una destinazione potenziale. Per consentire il rilascio, la standard action del browser deve essere esplicitamente prevenuta, solitamente tramite `event.preventDefault()`. Ciò segnala al browser che la zona è un valido Drop Target.",{"data":269,"type":221},{"text":270},"\u003Cstrong>3. drop:\u003C\u002Fstrong> Questo evento si verifica quando l'elemento viene rilasciato con successo sopra il destinatario. Qui le informazioni memorizzate durante `dragstart` vengono recuperate tramite `event.dataTransfer.getData(format)`. Successivamente, avviene la manipolazione effettiva del DOM, ad esempio lo spostamento del punto di menu alla nuova posizione nella lista.",{"data":272,"type":221},{"text":273},"\u003Cstrong>4. dragend:\u003C\u002Fstrong> Questo evento viene attivato quando il processo di trascinamento è completato, indipendentemente dal fatto che il rilascio sia stato effettuato con successo o interrotto. Serve principalmente a pulire, come reimpostare stati visivi o rimuovere classi temporanee.",{"data":275,"type":42},{"text":276,"level":46},"Uso di TypeScript",{"data":278,"type":221},{"text":279},"Lavorando con sistemi di eventi complessi come l'API drag and drop, TypeScript offre vantaggi significativi. La corretta tipizzazione degli oggetti degli eventi (ad esempio `DragEvent` invece dell'eventuale `Event`) garantisce che i sviluppatori possano accedere direttamente all'oggetto `dataTransfer`, senza correre il rischio di errori di runtime. Questo migliora la qualità del codice e la manutenibilità, in particolare nei progetti più grandi basati su Vanilla JavaScript.",{"data":281,"type":42},{"text":282,"level":228},"Casi d'uso: Menù interattivi e altro",{"data":284,"type":221},{"text":285},"La capacità di riordinare dinamicamente gli elementi è fondamentale per molte moderne applicazioni web. L'esempio della struttura del menu è qui un caso classico di utilizzo. Se un sistema di gestione del contenuto (CMS) consente la modifica dell'ordine di navigazione, il drag and drop viene utilizzato per manipolare visivamente l'ordinamento degli elementi elencati (punti del menù).",{"data":287,"type":221},{"text":288},"Altri casi d'uso tipici includono:",{"data":290,"type":249},{"items":291,"style":248},[292,293,294,295],"\u003Cstrong>Tabelloni Kanban:\u003C\u002Fstrong> Trascinare le carte delle attività tra colonne diverse (modifica dello stato).","\u003Cstrong>Gestori di file:\u003C\u002Fstrong> Trascinare file o cartelle tra directory.","\u003Cstrong>Configuratori e-commerce:\u003C\u002Fstrong> Ordinare componenti del prodotto o elementi di personalizzazione.","\u003Cstrong>Editore di playlist:\u003C\u002Fstrong> Modificare l'ordine di riproduzione dei file multimediali.",{"data":297,"type":221},{"text":298},"In tutte queste situazioni, la logica JavaScript dopo l'evento `drop` è responsabile non solo dell'aggiornamento del DOM, ma anche della sincronizzazione delle strutture dati sottostanti (ad esempio un array o una base di dati) per garantire la persistenza dell'ordinamento nuovo.",{"data":300,"type":42},{"text":301,"level":228},"Conclusione e prospettive",{"data":303,"type":221},{"text":304},"L'API nativa HTML5 Drag and Drop offre una solida e performante base per l'implementazione di interazioni complesse in JavaScript. Anche se l'API richiede una gestione precisa del flusso degli eventi – in particolare la prevenzione dell'azione standard durante `dragover` e l'utilizzo dell'oggetto `DataTransfer` – fornisce gli strumenti necessari per realizzare interattivi elementi come strutture di menu dinamici con efficienza.",{"data":306,"type":309},{"text":307,"caption":308},"La padronanza dell'oggetto `DataTransfer` e della catena degli eventi corretta è la chiave per l'implementazione di drag and drop nativo in moderne applicazioni web.","Conclusione tecnica","quote","2.31","L'implementazione della funzionalità di trascinamento e rilascio (drag and drop) è fondamentale per le moderne interfacce utente interattive. Questo articolo esamina la sua implementazione tecnica utilizzando l'API nativa HTML5 Drag-and-Drop in Vanilla JavaScript e TypeScript, con un focus sulla creazione di strutture di menu dinamiche.","\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":319,"de":320,"sr":321,"es":322,"fr":323,"it":324,"ru":325},"\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":328,"login":329,"email":330,"displayName":331},"20","rooth8233","aleksandar@stajic.de","Aleksandar Stajić",[333,389],{"lang":334,"title":335,"content":336,"contentJson":337,"excerpt":388},"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":338,"blocks":339,"version":310},1766878193013,[340,344,348,352,356,360,364,368,372,376,380,384],{"id":341,"data":342,"type":221},"01dd050d903fcb9e",{"text":343},"Standardization and Browser Compatibility:",{"id":345,"data":346,"type":221},"9917f0a669c86dbb",{"text":347},"Performance:",{"id":349,"data":350,"type":221},"3d9ca1fe7cbb09aa",{"text":351},"Accessibility (A11y):",{"id":353,"data":354,"type":221},"68d79fc9715111dc",{"text":355},"Data Transfer:",{"id":357,"data":358,"type":221},"939fa84f857a360f",{"text":359},"1. dragstart:",{"id":361,"data":362,"type":221},"f0973cb9e0474b6f",{"text":363},"2. dragover:",{"id":365,"data":366,"type":221},"5e6fd33d47cbce7e",{"text":367},"3. drop:",{"id":369,"data":370,"type":221},"49bb52aafa18afe0",{"text":371},"4. dragend:",{"id":373,"data":374,"type":221},"b8e993098ff471b9",{"text":375},"Kanban Boards:",{"id":377,"data":378,"type":221},"832ed3df4e85e5c8",{"text":379},"File Managers:",{"id":381,"data":382,"type":221},"8d80f58bd66ea31c",{"text":383},"E-Commerce Configurators:",{"id":385,"data":386,"type":221},"a2dfe8c46ea3655e",{"text":387},"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.",{"lang":7,"title":208,"content":210,"contentJson":390,"excerpt":311},{"time":212,"blocks":391,"version":310},[392,394,396,398,400,402,404,406,408,411,413,415,417,419,421,423,425,427,429,431,433,435,437,440,442,444,446],{"data":393,"type":42},{"text":216,"level":217},{"data":395,"type":221},{"text":220},{"data":397,"type":221},{"text":224},{"data":399,"type":42},{"text":227,"level":228},{"data":401,"type":221},{"text":231},{"data":403,"type":221},{"text":234},{"data":405,"type":42},{"text":237,"level":228},{"data":407,"type":221},{"text":240},{"data":409,"type":249},{"items":410,"style":248},[244,245,246,247],{"data":412,"type":42},{"text":252,"level":228},{"data":414,"type":221},{"text":255},{"data":416,"type":258},{},{"data":418,"type":42},{"text":261,"level":46},{"data":420,"type":221},{"text":264},{"data":422,"type":221},{"text":267},{"data":424,"type":221},{"text":270},{"data":426,"type":221},{"text":273},{"data":428,"type":42},{"text":276,"level":46},{"data":430,"type":221},{"text":279},{"data":432,"type":42},{"text":282,"level":228},{"data":434,"type":221},{"text":285},{"data":436,"type":221},{"text":288},{"data":438,"type":249},{"items":439,"style":248},[292,293,294,295],{"data":441,"type":221},{"text":298},{"data":443,"type":42},{"text":301,"level":228},{"data":445,"type":221},{"text":304},{"data":447,"type":309},{"text":307,"caption":308},"Post erfolgreich abgerufen",{"items":450,"source":535,"manualIds":536,"manualMatchedIds":537},[451,458,465,472,479,486,493,500,507,514,521,528],{"id":452,"slug":453,"title":454,"excerpt":455,"featuredImage":456,"publishedAt":457},"377","how-to-install-php-8-3-on-ubuntu-22-04","Come installare PHP 8.3 su Ubuntu 22.04","Guida aggiornata all'installazione di PHP 8.3 su Ubuntu 22.04, inclusa l'integrazione con Apache e Nginx (PHP-FPM), le estensioni e l'esecuzione di più versioni di PHP affiancate.","\u002Fuploads\u002F2025\u002F01\u002FHow-to-Install-PHP-8.3-on-Ubuntu-22.04-large.webp","2025-01-15T11:41:00.000Z",{"id":459,"slug":460,"title":461,"excerpt":462,"featuredImage":463,"publishedAt":464},"476","mcp-vs-a2a-vs-ucp-vs-ap2-vs-a2ui-the-agent-protocol-stack-explained","MCP vs A2A vs UCP vs AP2 vs A2UI: Lo stack di protocolli degli agenti spiegato","MCP, A2A, UCP, AP2 e A2UI sono spesso presentati come standard per agenti concorrenti. Per lo più risolvono problemi di interoperabilità diversi. Questa guida mappa ciascun protocollo sul confine che effettivamente standardizza—e mostra come possano lavorare insieme in un unico sistema di produzione.","\u002Fuploads\u002F2026\u002F09\u002Fmcp-vs-a2a-vs-ucp-vs-ap2-vs-a2ui-the-agent-protocol-stack-explained-1790352625869-2ezle0.webp","2026-09-25T12:09:00.000Z",{"id":466,"slug":467,"title":468,"excerpt":469,"featuredImage":470,"publishedAt":471},"443","linux","Tendenze emergenti di Linux nel 2026: plasmare il futuro dell'infrastruttura server","Esplora le principali tendenze Linux del 2026, dal dominio di Kubernetes e dalle distribuzioni immutabili all'integrazione dell'IA e alla sicurezza eBPF.","\u002Fuploads\u002F2026\u002F03\u002Flinux-1773696098750-knp03t.webp","2026-03-01T13:52:00.000Z",{"id":473,"slug":474,"title":475,"excerpt":476,"featuredImage":477,"publishedAt":478},"466","the-gpu-is-not-the-product-future-proof-private-ai-architecture","La GPU non è il prodotto: architettura di IA privata a prova di futuro","L'infrastruttura di IA privata non dovrebbe essere progettata attorno a una sola GPU o a un solo modello. Un approccio più resiliente combina GPU veloci per l'inferenza, sistemi di IA ricchi di memoria, nodi di IA fisica e modelli cloud di frontiera opzionali dietro un livello di routing consapevole delle capacità.","\u002Fuploads\u002F2026\u002F09\u002Fthe-gpu-is-not-the-product-future-proof-private-ai-architecture-1790140878812-8hsl39.webp","2026-09-23T01:19:00.000Z",{"id":480,"slug":481,"title":482,"excerpt":483,"featuredImage":484,"publishedAt":485},"462","the-prompt-is-part-of-the-bias-how-ai-framing-shapes-reasoning","Il prompt fa parte del bias: come il framing dell'IA modella il ragionamento","La formulazione del prompt non è neutrale. Esplora come il framing, i presupposti, il rispetto delle istruzioni e la sicofanzia possano plasmare il ragionamento dell'IA—e perché conclusioni affidabili richiedano test che vadano oltre il prompt originale.","\u002Fuploads\u002F2026\u002F09\u002Fthe-prompt-is-part-of-the-bias-how-ai-framing-shapes-reasoning-1789804884054-u278vc.webp","2026-09-19T01:04:00.000Z",{"id":487,"slug":488,"title":489,"excerpt":490,"featuredImage":491,"publishedAt":492},"10","portal-development-a-scalable-platform-for-performance-multilingual-support-and-extensibility","Sviluppo di Portali: Una Piattaforma Scalabile per le Prestazioni, il Supporto Multilingue e l'Estensibilità","Un moderno portale web in costruzione si concentra su architettura pulita, alte prestazioni, scalabilità","\u002Fuploads\u002F2026\u002F01\u002Fportal-development-a-scalable-platform-for-performance-multilingual-support-and-extensibility-1769006690165-vklvij.webp","2026-01-21T10:32:00.000Z",{"id":494,"slug":495,"title":496,"excerpt":497,"featuredImage":498,"publishedAt":499},"471","how-to-know-whether-an-ai-agent-actually-used-the-right-evidence","Come sapere se un agente IA ha effettivamente usato le prove giuste","Un agente IA può citare fonti e comunque utilizzare le prove sbagliate. Questo articolo introduce un metodo pratico per verificare il supporto delle affermazioni, l'autorevolezza della fonte, l'applicabilità, la provenienza e se le prove abbiano effettivamente influenzato la risposta.","\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":501,"slug":502,"title":503,"excerpt":504,"featuredImage":505,"publishedAt":506},"374","databasemarketing","Database marketing – Approccio moderno per le relazioni con i clienti","Panoramica moderna sul marketing di database: dalla strategia dei dati e l'architettura tecnica fino all'automazione, al GDPR e alle migliori pratiche per relazioni durature con i clienti.","\u002Fuploads\u002F2025\u002F01\u002FDatabasemarketing.png-medium.webp","2025-01-06T00:15:00.000Z",{"id":508,"slug":509,"title":510,"excerpt":511,"featuredImage":512,"publishedAt":513},"451","test-dev-enterprise","Comprehensive Guide to Test Dev Enterprise Stajic.de: Architecture and Best Practices","Explore the architectural principles, benefits, and technical details of managing an enterprise-grade development and testing environment with Test DEv Enterprise Stajic.de.","\u002Fuploads\u002F2026\u002F05\u002Ftest-dev-enterprise-1779534260081-r4dvxn.webp","2026-05-22T23:01:00.000Z",{"id":515,"slug":516,"title":517,"excerpt":518,"featuredImage":519,"publishedAt":520},"1","welcome-to-nuxtwo-multilang-theme","Welcome to NuxtWP Multilang Theme","Introduction to the NuxtWP Multilang Theme - a modern multilingual CMS built with Nuxt 4.","\u002Fuploads\u002F2014\u002F09\u002FSEO-Mobile-Webapplikation-Muenchen-www.stajic.de_3.webp","2025-10-31T11:31:14.829Z",{"id":522,"slug":523,"title":524,"excerpt":525,"featuredImage":526,"publishedAt":527},"454","zbt-z8102ax-rm500u-ea-5g-modem-test","Quectel RM500U-EA nel ZBT Z8102AX: bande 5G, o2 Germania e comportamento del segnale nel mondo reale","Lo ZBT Z8102AX utilizza un modem Quectel RM500U-EA per la connettività 4G e 5G. Nel primo test pratico, il router si è connesso con successo a o2 Germany con la banda LTE 3 e NR n28. Il modem funziona, ma diagnostiche più approfondite come RSRP, RSRQ, SINR, il blocco delle bande e il comportamento delle celle richiedono ancora test adeguati.","\u002Fuploads\u002F2026\u002F06\u002Fopenwrt-router-review-dual-sim-06-1781620597879-qay2sx.webp","2026-06-16T08:39:00.000Z",{"id":529,"slug":530,"title":531,"excerpt":532,"featuredImage":533,"publishedAt":534},"9","ubuntu-graphics-stack-transition-hybrid-gpu-boot-crashes-wayland-risks-and-stable-deployment-practices","Transizione dello Stack Grafico Ubuntu: Crash all'avvio con GPU ibrida, Rischi di Wayland e Pratiche di Distribuzione Stabile","Gli aggiornamenti del desktop Ubuntu possono causare blocchi all'avvio, sessioni di login mancanti e rendering instabile—specialmente sui sistemi ibridi Intel + NVIDIA. Questo articolo spiega la transizione dello stack grafico sottostante, perché si verificano le regressioni e come distribuire Ubuntu in sicurezza utilizzando le baseline LTS e strategie di driver validate.","\u002Fuploads\u002F2026\u002F01\u002Fchatgpt-image-jan-17-2026-05-23-25-pm-1768673754531-r4c498.webp","2026-01-18T19:14:00.000Z","fallback",[],[]]