[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"portal-settings:stajic:fr":3,"public-menus:all":38,"post:drag-and-drop-beispiel:fr":205,"related:post:drag-and-drop-beispiel:fr: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","fr","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","Glisser-déposer avec JavaScript : Une analyse approfondie de l'API native pour les structures de menu interactives","drag-and-drop-beispiel","{\"time\":1701198000,\"blocks\":[{\"data\":{\"text\":\"Introduction au drag-and-drop natif en JavaScript\",\"level\":2},\"type\":\"header\"},{\"data\":{\"text\":\"Les interfaces utilisateur interactives (IU) sont un élément fondamental des applications web modernes. La possibilité de déplacer des éléments par glisser-déposer améliore significativement l'expérience utilisateur, notamment dans la gestion de listes, menus ou l'organisation de contenus. Alors que par le passé il était souvent nécessaire d'utiliser des bibliothèques ou frameworks complexes pour implémenter cette fonctionnalité, l'API HTML5 natif de glisser-déposer offre une solution standardisée et performante qui peut être utilisée directement avec Vanilla JavaScript.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Cet article sert d’analyse technique et de démonstration des principes sous-jacents à la mise en œuvre de la fonctionnalité glisser-déposer en JavaScript. Le focus est mis sur le contrôle précis du flux de données et du traitement des événements nécessaires pour réorganiser dynamiquement une structure de menu, par exemple.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Principes fondamentaux de l'API HTML5 drag-and-drop\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"L’API glisser-déposer native repose sur une série d’événements DOM et l’attribut global `draggable`. Pour rendre un élément déplaçable, cet attribut doit être défini sur `true`. L'interaction se divise en deux principaux domaines : l'élément source de glisser-déposer (Drag Source) et la cible d'accrochage (Drop Target).\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Le processus de glisser-déposer est contrôlé par une chaîne définie d'événements qui doivent être traités avec précision pour garantir la fonctionnalité souhaitée. En particulier, le traitement correct de l’événement `dragover` est crucial car les navigateurs empêchent généralement par défaut l'accrochage des éléments.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Avantages de l'implémentation native\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"Le choix de l’API HTML5 native par rapport aux bibliothèques externes offre plusieurs avantages techniques et architecturaux :\"},\"type\":\"paragraph\"},{\"data\":{\"items\":[\"\u003Cstrong>Standardisation et compatibilité des navigateurs :\u003C\u002Fstrong> L'API est un standard web qui est nativement pris en charge par tous les navigateurs modernes, réduisant ainsi la nécessité d'utiliser des polyfills.\",\"\u003Cstrong>Rendement :\u003C\u002Fstrong> Comme la fonctionnalité est implémentée nativement dans le navigateur, sa performance est généralement supérieure à celle des émulations basées sur JavaScript.\",\"\u003Cstrong>Accessibilité :\u003C\u002Fstrong> L'implémentation native peut interagir mieux avec les technologies d’assistance, sous réserve que les attributs ARIA correspondants soient correctement définis.\",\"\u003Cstrong>Transfert de données (Data Transfer) :\u003C\u002Fstrong> L'API offre un objet `DataTransfer` dédié qui permet de stocker et récupérer des données typées MIME (par exemple du texte, des URL ou des données personnalisées) pendant le processus de glisser-déposer.\"],\"style\":\"unordered\"},\"type\":\"list\"},{\"data\":{\"text\":\"Détails techniques et gestion d'événements\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"L'implémentation nécessite la surveillance et le contrôle au moins de six événements centraux. Le cœur de cette fonctionnalité est l’objet `DataTransfer`, accessible via les objets d’événement, servant de stockage temporaire pour les informations à déplacer.\"},\"type\":\"paragraph\"},{\"data\":{},\"type\":\"delimiter\"},{\"data\":{\"text\":\"Les événements clés du cycle glisser-déposer\",\"level\":4},\"type\":\"header\"},{\"data\":{\"text\":\"\u003Cstrong>1. dragstart :\u003C\u002Fstrong> Cet événement est déclenché dès que l'utilisateur commence à faire glisser un élément. Ici, les informations à transférer doivent être stockées dans l’objet `dataTransfer`, généralement via `event.dataTransfer.setData(format, data)`. Pour la réorganisation d'un menu, cela pourrait être l'ID de l'élément déplacé.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>2. dragover :\u003C\u002Fstrong> Cet événement est déclenché continuellement pendant que l’élément glissé est déplacé au-dessus d'un potentiel cible. Pour permettre le dépôt, la standard action du navigateur doit être explicitement supprimée, généralement par `event.preventDefault()`. Cela signale au navigateur que la zone est une cible de dépôt valide.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>3. drop :\u003C\u002Fstrong> Cet événement se produit lorsque l’élément est relâché avec succès sur le cible. Ici, les informations stockées lors du `dragstart` sont récupérées via `event.dataTransfer.getData(format)`. Ensuite, la manipulation réelle du DOM a lieu, par exemple le déplacement de l'élément menu vers une nouvelle position dans la liste.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>4. dragend :\u003C\u002Fstrong> Cet événement est déclenché lorsque le processus de glisser-déposer est terminé, indépendamment du succès ou de l’annulation du dépôt. Il sert principalement à la nettoyage, comme le réinitialisation des états visuels ou l’élimination des classes temporaires.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Utilisation de TypeScript\",\"level\":4},\"type\":\"header\"},{\"data\":{\"text\":\"Lorsque vous travaillez avec des systèmes d'événements complexes tels que l'API glisser-déposer, TypeScript offre de nombreux avantages. La typification correcte des objets événement (par exemple `DragEvent` au lieu du générique `Event`) garantit que les développeurs peuvent accéder directement à l’objet `dataTransfer`, sans risquer d'erreurs en temps réel. Cela améliore la qualité du code et sa maintenabilité, surtout dans des projets plus importants basés sur Vanilla JavaScript.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Cas d'utilisation : Menus interactifs et plus encore\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"La capacité de réorganiser dynamiquement les éléments est essentielle pour de nombreuses applications web modernes. L'exemple de la structure du menu en est un cas classique. Si un système de gestion de contenu (CMS) permet l'édition de l'ordre d'affichage, le glisser-déposer est utilisé pour manipuler visuellement l’ordre des éléments listés (points de menu).\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"D'autres utilisations typiques incluent :\"},\"type\":\"paragraph\"},{\"data\":{\"items\":[\"\u003Cstrong>Boards Kanban :\u003C\u002Fstrong> Déplacer des cartes d'affaires entre différentes colonnes (changement d'état).\",\"\u003Cstrong>Gestionnaire de fichiers :\u003C\u002Fstrong> Déplacer des fichiers ou des répertoires entre des dossiers.\",\"\u003Cstrong>Éditeurs configurateurs e-commerce :\u003C\u002Fstrong> Organiser les composants de produits ou des éléments personnalisables.\",\"\u003Cstrong>Éditeurs de listes de lecture :\u003C\u002Fstrong> Changer l'ordre de lecture des fichiers multimédias.\"],\"style\":\"unordered\"},\"type\":\"list\"},{\"data\":{\"text\":\"Dans tous ces scénarios, la logique JavaScript après l’événement `drop` est responsable non seulement de mettre à jour le DOM, mais aussi d’aligner les structures de données sous-jacentes (par exemple un tableau ou une base de données) pour garantir la persistance de la nouvelle organisation.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Conclusion et perspectives\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"L'API HTML5 glisser-déposer native offre une base robuste et performante pour l’implémentation d’interactions complexes en JavaScript. Bien que l'API nécessite un contrôle précis du flux des événements – notamment la suppression de l'action standard lors de `dragover` et l'utilisation de l’objet `DataTransfer` – elle fournit les outils nécessaires pour réaliser efficacement des éléments interactifs tels que des structures de menu dynamiques.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Maîtriser l'objet `DataTransfer` et la chaîne d'événements correcte est la clé pour une mise en œuvre réussie du glisser-déposer natif dans les applications web modernes.\",\"caption\":\"Conclusion technique\"},\"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},"Introduction au drag-and-drop natif en JavaScript",2,{"data":219,"type":221},{"text":220},"Les interfaces utilisateur interactives (IU) sont un élément fondamental des applications web modernes. La possibilité de déplacer des éléments par glisser-déposer améliore significativement l'expérience utilisateur, notamment dans la gestion de listes, menus ou l'organisation de contenus. Alors que par le passé il était souvent nécessaire d'utiliser des bibliothèques ou frameworks complexes pour implémenter cette fonctionnalité, l'API HTML5 natif de glisser-déposer offre une solution standardisée et performante qui peut être utilisée directement avec Vanilla JavaScript.","paragraph",{"data":223,"type":221},{"text":224},"Cet article sert d’analyse technique et de démonstration des principes sous-jacents à la mise en œuvre de la fonctionnalité glisser-déposer en JavaScript. Le focus est mis sur le contrôle précis du flux de données et du traitement des événements nécessaires pour réorganiser dynamiquement une structure de menu, par exemple.",{"data":226,"type":42},{"text":227,"level":228},"Principes fondamentaux de l'API HTML5 drag-and-drop",3,{"data":230,"type":221},{"text":231},"L’API glisser-déposer native repose sur une série d’événements DOM et l’attribut global `draggable`. Pour rendre un élément déplaçable, cet attribut doit être défini sur `true`. L'interaction se divise en deux principaux domaines : l'élément source de glisser-déposer (Drag Source) et la cible d'accrochage (Drop Target).",{"data":233,"type":221},{"text":234},"Le processus de glisser-déposer est contrôlé par une chaîne définie d'événements qui doivent être traités avec précision pour garantir la fonctionnalité souhaitée. En particulier, le traitement correct de l’événement `dragover` est crucial car les navigateurs empêchent généralement par défaut l'accrochage des éléments.",{"data":236,"type":42},{"text":237,"level":228},"Avantages de l'implémentation native",{"data":239,"type":221},{"text":240},"Le choix de l’API HTML5 native par rapport aux bibliothèques externes offre plusieurs avantages techniques et architecturaux :",{"data":242,"type":249},{"items":243,"style":248},[244,245,246,247],"\u003Cstrong>Standardisation et compatibilité des navigateurs :\u003C\u002Fstrong> L'API est un standard web qui est nativement pris en charge par tous les navigateurs modernes, réduisant ainsi la nécessité d'utiliser des polyfills.","\u003Cstrong>Rendement :\u003C\u002Fstrong> Comme la fonctionnalité est implémentée nativement dans le navigateur, sa performance est généralement supérieure à celle des émulations basées sur JavaScript.","\u003Cstrong>Accessibilité :\u003C\u002Fstrong> L'implémentation native peut interagir mieux avec les technologies d’assistance, sous réserve que les attributs ARIA correspondants soient correctement définis.","\u003Cstrong>Transfert de données (Data Transfer) :\u003C\u002Fstrong> L'API offre un objet `DataTransfer` dédié qui permet de stocker et récupérer des données typées MIME (par exemple du texte, des URL ou des données personnalisées) pendant le processus de glisser-déposer.","unordered","list",{"data":251,"type":42},{"text":252,"level":228},"Détails techniques et gestion d'événements",{"data":254,"type":221},{"text":255},"L'implémentation nécessite la surveillance et le contrôle au moins de six événements centraux. Le cœur de cette fonctionnalité est l’objet `DataTransfer`, accessible via les objets d’événement, servant de stockage temporaire pour les informations à déplacer.",{"data":257,"type":258},{},"delimiter",{"data":260,"type":42},{"text":261,"level":46},"Les événements clés du cycle glisser-déposer",{"data":263,"type":221},{"text":264},"\u003Cstrong>1. dragstart :\u003C\u002Fstrong> Cet événement est déclenché dès que l'utilisateur commence à faire glisser un élément. Ici, les informations à transférer doivent être stockées dans l’objet `dataTransfer`, généralement via `event.dataTransfer.setData(format, data)`. Pour la réorganisation d'un menu, cela pourrait être l'ID de l'élément déplacé.",{"data":266,"type":221},{"text":267},"\u003Cstrong>2. dragover :\u003C\u002Fstrong> Cet événement est déclenché continuellement pendant que l’élément glissé est déplacé au-dessus d'un potentiel cible. Pour permettre le dépôt, la standard action du navigateur doit être explicitement supprimée, généralement par `event.preventDefault()`. Cela signale au navigateur que la zone est une cible de dépôt valide.",{"data":269,"type":221},{"text":270},"\u003Cstrong>3. drop :\u003C\u002Fstrong> Cet événement se produit lorsque l’élément est relâché avec succès sur le cible. Ici, les informations stockées lors du `dragstart` sont récupérées via `event.dataTransfer.getData(format)`. Ensuite, la manipulation réelle du DOM a lieu, par exemple le déplacement de l'élément menu vers une nouvelle position dans la liste.",{"data":272,"type":221},{"text":273},"\u003Cstrong>4. dragend :\u003C\u002Fstrong> Cet événement est déclenché lorsque le processus de glisser-déposer est terminé, indépendamment du succès ou de l’annulation du dépôt. Il sert principalement à la nettoyage, comme le réinitialisation des états visuels ou l’élimination des classes temporaires.",{"data":275,"type":42},{"text":276,"level":46},"Utilisation de TypeScript",{"data":278,"type":221},{"text":279},"Lorsque vous travaillez avec des systèmes d'événements complexes tels que l'API glisser-déposer, TypeScript offre de nombreux avantages. La typification correcte des objets événement (par exemple `DragEvent` au lieu du générique `Event`) garantit que les développeurs peuvent accéder directement à l’objet `dataTransfer`, sans risquer d'erreurs en temps réel. Cela améliore la qualité du code et sa maintenabilité, surtout dans des projets plus importants basés sur Vanilla JavaScript.",{"data":281,"type":42},{"text":282,"level":228},"Cas d'utilisation : Menus interactifs et plus encore",{"data":284,"type":221},{"text":285},"La capacité de réorganiser dynamiquement les éléments est essentielle pour de nombreuses applications web modernes. L'exemple de la structure du menu en est un cas classique. Si un système de gestion de contenu (CMS) permet l'édition de l'ordre d'affichage, le glisser-déposer est utilisé pour manipuler visuellement l’ordre des éléments listés (points de menu).",{"data":287,"type":221},{"text":288},"D'autres utilisations typiques incluent :",{"data":290,"type":249},{"items":291,"style":248},[292,293,294,295],"\u003Cstrong>Boards Kanban :\u003C\u002Fstrong> Déplacer des cartes d'affaires entre différentes colonnes (changement d'état).","\u003Cstrong>Gestionnaire de fichiers :\u003C\u002Fstrong> Déplacer des fichiers ou des répertoires entre des dossiers.","\u003Cstrong>Éditeurs configurateurs e-commerce :\u003C\u002Fstrong> Organiser les composants de produits ou des éléments personnalisables.","\u003Cstrong>Éditeurs de listes de lecture :\u003C\u002Fstrong> Changer l'ordre de lecture des fichiers multimédias.",{"data":297,"type":221},{"text":298},"Dans tous ces scénarios, la logique JavaScript après l’événement `drop` est responsable non seulement de mettre à jour le DOM, mais aussi d’aligner les structures de données sous-jacentes (par exemple un tableau ou une base de données) pour garantir la persistance de la nouvelle organisation.",{"data":300,"type":42},{"text":301,"level":228},"Conclusion et perspectives",{"data":303,"type":221},{"text":304},"L'API HTML5 glisser-déposer native offre une base robuste et performante pour l’implémentation d’interactions complexes en JavaScript. Bien que l'API nécessite un contrôle précis du flux des événements – notamment la suppression de l'action standard lors de `dragover` et l'utilisation de l’objet `DataTransfer` – elle fournit les outils nécessaires pour réaliser efficacement des éléments interactifs tels que des structures de menu dynamiques.",{"data":306,"type":309},{"text":307,"caption":308},"Maîtriser l'objet `DataTransfer` et la chaîne d'événements correcte est la clé pour une mise en œuvre réussie du glisser-déposer natif dans les applications web modernes.","Conclusion technique","quote","2.31","L'implémentation de la fonctionnalité Drag-and-Drop est cruciale pour les interfaces utilisateur modernes et interactives. Cet article examine la mise en œuvre technique à l'aide de l'API HTML5 natif Drag-and-Drop dans Vanilla JavaScript et TypeScript, se concentrant sur la création de structures de menus dynamiques.","\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","Comment installer PHP 8.3 sur Ubuntu 22.04","Guide à jour sur l'installation de PHP 8.3 sur Ubuntu 22.04, incluant l'intégration d'Apache et Nginx (PHP-FPM), les extensions, et l'exécution de plusieurs versions de PHP côte à côte.","\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},"383","canonical-architecture-url-design-resolver-logic-api-scalability-specification","Architecture Canonique, Conception d'URL, Logique de Résolution, Spécification d'API et d'Évolutivité","Architecture de découverte géolocalisée pour les portails multi-locataires. Définit les URL canoniques, la logique de résolution, la stratégie de mise en cache et un modèle de lecture géo sans couplage CMS ni refactorisation de base de données. Conçue pour la stabilité SEO, l'évolutivité et les futures extensions comme la réservation et les cartes.","\u002Fuploads\u002F2026\u002F01\u002Fcanonical-architecture-url-design-resolver-logic-api-scalability-specification-1769890763607-7rghbp.webp","2026-01-31T06:12:00.000Z",{"id":466,"slug":467,"title":468,"excerpt":469,"featuredImage":470,"publishedAt":471},"384","new-qwen-3-5-plus","Nouveau Qwen 3.5-Plus : l'IA open-source passe aux choses sérieuses","Découvrez les fonctionnalités et avantages révolutionnaires de Qwen 3.5-Plus d'Alibaba, une IA open-source qui change la donne pour les développeurs.","\u002Fuploads\u002F2026\u002F02\u002Fnew-qwen-3-5-plus-1771515512741-dcbi9p.webp","2026-02-19T10:23:00.000Z",{"id":473,"slug":474,"title":475,"excerpt":476,"featuredImage":477,"publishedAt":478},"449","google-io-2026-agentic-products-search-workspace-and-shopping","Google I\u002FO 2026 : Produits agentiels dans la Recherche, Workspace et Shopping","Google I\u002FO 2026 a montré que l'IA agentielle va au-delà des démonstrations de modèles et des outils de développement pour s'intégrer dans les interfaces des produits du quotidien. Cet article explique comment Search, Workspace, Gemini Spark et Universal Cart pointent vers un nouveau modèle de produit où les agents Google aident les utilisateurs à effectuer des recherches, travailler, faire des achats et agir à travers des services connectés.","\u002Fuploads\u002F2026\u002F05\u002Fgoogle-io-2026-agentic-products-search-workspace-and-shopping-1779228004340-9mqs07.webp","2026-05-21T11:09:00.000Z",{"id":480,"slug":481,"title":482,"excerpt":483,"featuredImage":484,"publishedAt":485},"448","google-io-2026-android-xr-and-intelligent-eyewear","Google I\u002FO 2026 : Android XR, lunettes intelligentes et l'interface d'IA ambiante","Google I\u002FO 2026 a fait passer Android XR et les lunettes intelligentes du concept vers une véritable orientation de plateforme. Cet article décrypte les lunettes audio, les lunettes à affichage, la conscience contextuelle alimentée par Gemini, les implications pour les développeurs, les risques pour la vie privée, et pourquoi l'IA portable consiste moins à remplacer les téléphones qu'à créer des surfaces d'assistance ambiante.","\u002Fuploads\u002F2026\u002F05\u002Fgoogle-io-2026-android-xr-and-intelligent-eyewear-1779227942270-dtsm9y.webp","2026-05-21T11:05:00.000Z",{"id":487,"slug":488,"title":489,"excerpt":490,"featuredImage":491,"publishedAt":492},"470","what-should-an-ai-agent-remember-forget-recompute-or-retrieve-again","Que devrait mémoriser, oublier, recalculer ou récupérer à nouveau un agent IA ?","Les agents à exécution longue ne devraient pas tout retenir. Cet article propose un modèle de cycle de vie pratique pour décider de ce qui a sa place dans la mémoire durable, de ce qui devrait être récupéré à nouveau, de ce qu'il est plus sûr de recalculer et de ce qui devrait expirer ou être remplacé.","\u002Fuploads\u002F2026\u002F09\u002Fwhat-should-an-ai-agent-remember-forget-recompute-or-retrieve-again-1790351131087-iehz28.webp","2026-09-25T09:43:00.000Z",{"id":494,"slug":495,"title":496,"excerpt":497,"featuredImage":498,"publishedAt":499},"466","the-gpu-is-not-the-product-future-proof-private-ai-architecture","Le GPU n'est pas le produit : architecture d'IA privée pérenne","Une infrastructure d'IA privée ne devrait pas être conçue autour d'un seul GPU ou d'un seul modèle. Une approche plus résiliente combine des GPU d'inférence rapides, des systèmes d'IA riches en mémoire, des nœuds d'IA physique et des modèles cloud de pointe optionnels derrière une couche de routage prenant en compte les capacités.","\u002Fuploads\u002F2026\u002F09\u002Fthe-gpu-is-not-the-product-future-proof-private-ai-architecture-1790140878812-8hsl39.webp","2026-09-23T01:19:00.000Z",{"id":501,"slug":502,"title":503,"excerpt":504,"featuredImage":505,"publishedAt":506},"382","a-practical-monorepo-architecture-next-js-platform-admin-fastify-api-prisma-and-nginx","Une Architecture Monorepo Pratique avec Next.js, Fastify, Prisma, et NGINX","Explorez une architecture de monorepo pratique utilisant Next.js, Fastify, Prisma et NGINX, mettant en évidence l'intégration et le flux de travail concrets.","\u002Fuploads\u002F2026\u002F01\u002Fa-practical-monorepo-architecture-next-js-platform-admin-fastify-api-prisma-and-nginx-1769885526116-q1100n.webp","2026-01-31T08:18:00.000Z",{"id":508,"slug":509,"title":510,"excerpt":511,"featuredImage":512,"publishedAt":513},"463","prompt-invariance-does-the-conclusion-survive-the-prompt","Invariance du prompt : la conclusion survit-elle au prompt ?","Une méthodologie pratique pour tester si la conclusion d'une IA dépend de la manière dont un problème a été formulé. Prompt Invariance compare des formulations originales, en aveugle, inversées et contradictoires, tout en maintenant la structure des preuves sous contrôle.","\u002Fuploads\u002F2026\u002F09\u002Fprompt-invariance-does-the-conclusion-survive-the-prompt-1789809799910-s0vbcb.webp","2026-09-19T01:09:00.000Z",{"id":515,"slug":516,"title":517,"excerpt":518,"featuredImage":519,"publishedAt":520},"457","should-you-buy-5g-openwrt-router-old-firmware","Faut-il acheter un routeur 5G OpenWrt avec un ancien firmware ? Le ZBT Z8102AX comme exemple concret","Acheter un routeur 5G OpenWrt avec un ancien firmware peut avoir du sens, mais uniquement dans les bonnes conditions. Le ZBT Z8102AX illustre clairement les deux aspects : le matériel est utile, le modem fonctionne et le routeur est resté stable lors des tests, mais OpenWrt 21.02, un emballage faible et des chemins de mise à niveau peu clairs nécessitent une décision d'achat réfléchie.","\u002Fuploads\u002F2026\u002F06\u002Fopenwrt-router-review-dual-sim-05-1781620596218-5ldld4.webp","2026-06-16T10:41:00.000Z",{"id":522,"slug":523,"title":524,"excerpt":525,"featuredImage":526,"publishedAt":527},"475","managed-agent-harness-vs-self-hosted-agent-loop-what-you-gain-what-you-lose","Harnais d'agent géré vs boucle d'agent auto-hébergée : ce que vous gagnez, ce que vous perdez","“Agent auto-hébergé” peut désigner des architectures très différentes. Ce guide distingue le harnais géré, l'environnement d'exécution auto-hébergé et la boucle d'agent entièrement auto-opérée—et montre de quelle frontière de contrôle les équipes ont réellement besoin.","\u002Fuploads\u002F2026\u002F09\u002Fmanaged-agent-harness-vs-self-hosted-agent-loop-what-you-gain-what-you-lose-1790352403475-kj10jh.webp","2026-09-25T12:05:00.000Z",{"id":529,"slug":530,"title":531,"excerpt":532,"featuredImage":533,"publishedAt":534},"464","falsification-for-ai-reasoning-from-answers-to-tested-hypotheses","Falsification pour le raisonnement de l'IA : des réponses aux hypothèses testées","Les modèles d’IA peuvent générer des preuves convaincantes pour presque toute hypothèse plausible. Une méthodologie plus fiable pose la question inverse : quelles preuves affaibliraient, contrediraient ou nous forceraient à abandonner la conclusion ? Cet article développe un raisonnement orienté vers la falsification pour les LLM en utilisant des hypothèses concurrentes, des tests discriminants, des contre-preuves et des critères de rejet explicites.","\u002Fuploads\u002F2026\u002F09\u002Ffalsification-for-ai-reasoning-from-answers-to-tested-hypotheses-1789811137616-3hce1b.webp","2026-09-19T01:11:00.000Z","fallback",[],[]]