[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"portal-settings:stajic:es":3,"public-menus:all":38,"post:drag-and-drop-beispiel:es":205,"related:post:drag-and-drop-beispiel:es:1":366},{"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","es","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":365},{"id":207,"title":208,"slug":209,"content":210,"contentJson":211,"excerpt":264,"featuredImage":265,"featuredImageAlt":266,"featuredImageCaption":10,"featuredImageTitle":10,"featuredImageCopyright":10,"featuredImageAuthor":10,"featuredImageSourceUrl":10,"featuredImageLicense":10,"featuredImageIsAiGenerated":43,"status":267,"publishedAt":268,"createdAt":269,"updatedAt":270,"seoLocalePaths":271,"categories":279,"author":280,"translations":285},"368","Arrastrar y soltar con JavaScript: Un análisis profundo de la API nativa para estructuras de menús interactivos","drag-and-drop-beispiel","{\"time\":1701198000,\"blocks\":[{\"data\":{\"text\":\"Introducción al arrastrar y soltar nativo en JavaScript\",\"level\":2},\"type\":\"header\"},{\"data\":{\"text\":\"Las interfaces de usuario interactivas (UIs) son un componente fundamental de las aplicaciones web modernas. La posibilidad de mover elementos mediante el arrastre y colocación mejora significativamente la experiencia del usuario, especialmente en la gestión de listas, menús o la organización de contenidos. Mientras que anteriormente se requerían bibliotecas o frameworks complejos para implementar esta funcionalidad, la API nativa HTML5 de arrastrar y soltar ofrece una solución estándar y potente que puede utilizarse directamente en Vanilla JavaScript.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Este artículo sirve como análisis técnico y demostración de los principios detrás de la implementación de funcionalidades de arrastre y colocación en JavaScript. El enfoque se centra en el control preciso del flujo de datos y el manejo de eventos necesarios para, por ejemplo, reorganizar una estructura de menú dinámica.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Fundamentos de la API HTML5 de arrastrar y soltar\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"La API nativa de arrastre y colocación se basa en una serie de eventos DOM y el atributo global `draggable`. Para hacer que un elemento sea arrastrable, este atributo debe establecerse en `true`. La interacción se divide en dos áreas principales: el origen del arrastre (Drag Source) y el destino de colocación (Drop Target).\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"El proceso de arrastre y colocación está controlado por una cadena definida de eventos que deben ser manejados con precisión para garantizar la funcionalidad deseada. En particular, un manejo correcto del evento `dragover` es crucial, ya que los navegadores evitan por defecto el colocar elementos.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Ventajas de la implementación nativa\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"La elección de la API HTML5 nativa frente a bibliotecas externas ofrece varios beneficios técnicos y arquitectónicos:\"},\"type\":\"paragraph\"},{\"data\":{\"items\":[\"\u003Cstrong>Estándarización y compatibilidad con navegadores:\u003C\u002Fstrong> La API es un estándar web que es soportado de forma nativa por todos los navegadores modernos, lo que reduce la necesidad de polyfills.\",\"\u003Cstrong>Rendimiento:\u003C\u002Fstrong> Dada su implementación nativa en el navegador, el rendimiento generalmente es más alto que en las emulaciones basadas en JavaScript.\",\"\u003Cstrong>Accesibilidad:\u003C\u002Fstrong> La implementación nativa puede interactuar mejor con tecnologías auxiliares siempre y cuando los atributos ARIA correspondientes se establezcan correctamente.\",\"\u003Cstrong>Transferencia de datos (Data Transfer):\u003C\u002Fstrong> La API ofrece un objeto `DataTransfer` dedicado que permite almacenar y recuperar datos tipificados por MIME (por ejemplo, texto, URLs o datos personalizados) durante el proceso de arrastre.\"],\"style\":\"unordered\"},\"type\":\"list\"},{\"data\":{\"text\":\"Detalles técnicos y manejo de eventos\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"La implementación requiere la supervisión y control de al menos seis eventos centrales. El núcleo de la funcionalidad es el objeto `DataTransfer`, que está disponible a través de los objetos de evento e actúa como un almacenamiento temporal para las informaciones a mover.\"},\"type\":\"paragraph\"},{\"data\":{},\"type\":\"delimiter\"},{\"data\":{\"text\":\"Los eventos clave del ciclo arrastrar y soltar\",\"level\":4},\"type\":\"header\"},{\"data\":{\"text\":\"\u003Cstrong>1. dragstart:\u003C\u002Fstrong> Este evento se desencadena cuando el usuario comienza a arrastrar un elemento. Aquí, la información a transferir debe almacenarse en el objeto `dataTransfer`, típicamente mediante `event.dataTransfer.setData(format, data)`. Para reorganizar una estructura de menú, esto podría ser la ID del elemento arrastrado.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>2. dragover:\u003C\u002Fstrong> Este evento se desencadena continuamente mientras el elemento arrastrado se mueve sobre un potencial destino. Para permitir la colocación, es necesario suprimir explícitamente la acción predeterminada del navegador, generalmente mediante `event.preventDefault()`. Esto indica al navegador que la zona es una ubicación válida para colocar.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>3. drop:\u003C\u002Fstrong> Este evento se produce cuando el elemento se suelta con éxito sobre el destino. Aquí, la información almacenada en `dragstart` se recupera mediante `event.dataTransfer.getData(format)`. A continuación, se realiza la manipulación real del DOM, por ejemplo, mover un punto de menú a una nueva posición en la lista.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>4. dragend:\u003C\u002Fstrong> Este evento se desencadena cuando el proceso de arrastre ha terminado, independientemente de si la colocación fue exitosa o cancelada. Su principal propósito es la limpieza, como restablecer estados visuales o eliminar clases temporales.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Uso de TypeScript\",\"level\":4},\"type\":\"header\"},{\"data\":{\"text\":\"Al trabajar con sistemas complejos de eventos, como la API de arrastre y colocación, TypeScript ofrece ventajas significativas. La tipificación correcta de los objetos de evento (por ejemplo, `DragEvent` en lugar del genérico `Event`) garantiza que los desarrolladores puedan acceder directamente al objeto `dataTransfer`, sin correr el riesgo de errores en tiempo de ejecución. Esto mejora la calidad y mantenibilidad del código, especialmente en proyectos más grandes basados en Vanilla JavaScript.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Casos de uso: Menús interactivos y más\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"La capacidad de reorganizar elementos dinámicamente es esencial para muchas aplicaciones web modernas. El ejemplo de la estructura del menú es un caso clásico. Si un sistema de gestión de contenidos (CMS) permite la edición de la secuencia de navegación, se utiliza arrastrar y colocar para manipular visualmente la secuencia de los elementos de lista (puntos de menú).\"),\"type\":\"paragraph\"},{\"data\":{\"text\":\"Otros usos típicos incluyen:\"},\"type\":\"paragraph\"},{\"data\":{\"items\":[\"\u003Cstrong>Tableros Kanban:\u003C\u002Fstrong> Mover tarjetas de tareas entre diferentes columnas (cambio de estado).\",\"\u003Cstrong>Gestores de archivos:\u003C\u002Fstrong> Mover archivos o carpetas entre directorios.\",\"\u003Cstrong>Configuradores de comercio electrónico:\u003C\u002Fstrong> Alinear componentes de productos o elementos personalizables.\",\"\u003Cstrong>Editores de listas de reproducción:\u003C\u002Fstrong> Cambiar la secuencia de reproducción de archivos multimedia.\"],\"style\":\"unordered\"},\"type\":\"list\"},{\"data\":{\"text\":\"En todos estos escenarios, la lógica de JavaScript después del evento `drop` es responsable no solo de actualizar el DOM, sino también de sincronizar las estructuras de datos subyacentes (por ejemplo, un array o una base de datos) para garantizar la persistencia de la nueva secuencia.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Conclusión y perspectivas\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"La API nativa HTML5 de arrastre y colocación ofrece una base sólida y eficiente para implementar interacciones complejas en JavaScript. Aunque la API requiere un control preciso del flujo de eventos, especialmente al suprimir la acción predeterminada durante `dragover` y utilizando el objeto `DataTransfer`, proporciona las herramientas necesarias para realizar elementos interactivos como estructuras de menú dinámicas eficientemente.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"El dominio del objeto `DataTransfer` y la cadena de eventos correcta es clave para una implementación exitosa de arrastrar y soltar nativo en aplicaciones web modernas.\",\"caption\":\"Conclusión técnica\"},\"type\":\"quote\"}],\"version\":\"2.31\"}",{"time":212,"blocks":213,"version":263},1766878193029,[214,219,223,227,231,235,239,243,247,251,255,259],{"id":215,"data":216,"type":218},"9731cc8406f516a7",{"text":217},"Estándarización y compatibilidad con navegadores:","paragraph",{"id":220,"data":221,"type":218},"4a522dfc5c1690be",{"text":222},"Rendimiento:",{"id":224,"data":225,"type":218},"1ea6e5c00e8667df",{"text":226},"Accesibilidad:",{"id":228,"data":229,"type":218},"6bb8bf154ee8081b",{"text":230},"Transferencia de datos (Data Transfer):",{"id":232,"data":233,"type":218},"b2e9945c68233e51",{"text":234},"1. dragstart:",{"id":236,"data":237,"type":218},"1816c783b69e2b0f",{"text":238},"2. dragover:",{"id":240,"data":241,"type":218},"df599d4c7a1bd309",{"text":242},"3. drop:",{"id":244,"data":245,"type":218},"86c271332867b4b3",{"text":246},"4. dragend:",{"id":248,"data":249,"type":218},"3acd559a5eb69c50",{"text":250},"Tableros Kanban:",{"id":252,"data":253,"type":218},"aa62d2c2630f06ae",{"text":254},"Gestores de archivos:",{"id":256,"data":257,"type":218},"a96cbd6a45d5215a",{"text":258},"Configuradores de comercio electrónico:",{"id":260,"data":261,"type":218},"e33ea8cefa7d5458",{"text":262},"Editores de listas de reproducción:","2.31","La implementación de la funcionalidad de arrastrar y soltar es crucial para las interfaces de usuario modernas e interactivas. Este artículo explora la implementación técnica utilizando la API nativa HTML5 Drag-and-Drop en Vanilla JavaScript y TypeScript, con un enfoque en la creación de estructuras de menús dinámicas.","\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":272,"de":273,"sr":274,"es":275,"fr":276,"it":277,"ru":278},"\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":281,"login":282,"email":283,"displayName":284},"20","rooth8233","aleksandar@stajic.de","Aleksandar Stajić",[286,338],{"lang":287,"title":288,"content":289,"contentJson":290,"excerpt":337},"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":291,"blocks":292,"version":263},1766878193013,[293,297,301,305,309,312,315,318,321,325,329,333],{"id":294,"data":295,"type":218},"01dd050d903fcb9e",{"text":296},"Standardization and Browser Compatibility:",{"id":298,"data":299,"type":218},"9917f0a669c86dbb",{"text":300},"Performance:",{"id":302,"data":303,"type":218},"3d9ca1fe7cbb09aa",{"text":304},"Accessibility (A11y):",{"id":306,"data":307,"type":218},"68d79fc9715111dc",{"text":308},"Data Transfer:",{"id":310,"data":311,"type":218},"939fa84f857a360f",{"text":234},{"id":313,"data":314,"type":218},"f0973cb9e0474b6f",{"text":238},{"id":316,"data":317,"type":218},"5e6fd33d47cbce7e",{"text":242},{"id":319,"data":320,"type":218},"49bb52aafa18afe0",{"text":246},{"id":322,"data":323,"type":218},"b8e993098ff471b9",{"text":324},"Kanban Boards:",{"id":326,"data":327,"type":218},"832ed3df4e85e5c8",{"text":328},"File Managers:",{"id":330,"data":331,"type":218},"8d80f58bd66ea31c",{"text":332},"E-Commerce Configurators:",{"id":334,"data":335,"type":218},"a2dfe8c46ea3655e",{"text":336},"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":339,"excerpt":264},{"time":212,"blocks":340,"version":263},[341,343,345,347,349,351,353,355,357,359,361,363],{"id":215,"data":342,"type":218},{"text":217},{"id":220,"data":344,"type":218},{"text":222},{"id":224,"data":346,"type":218},{"text":226},{"id":228,"data":348,"type":218},{"text":230},{"id":232,"data":350,"type":218},{"text":234},{"id":236,"data":352,"type":218},{"text":238},{"id":240,"data":354,"type":218},{"text":242},{"id":244,"data":356,"type":218},{"text":246},{"id":248,"data":358,"type":218},{"text":250},{"id":252,"data":360,"type":218},{"text":254},{"id":256,"data":362,"type":218},{"text":258},{"id":260,"data":364,"type":218},{"text":262},"Post erfolgreich abgerufen",{"items":367,"source":452,"manualIds":453,"manualMatchedIds":454},[368,375,382,389,396,403,410,417,424,431,438,445],{"id":369,"slug":370,"title":371,"excerpt":372,"featuredImage":373,"publishedAt":374},"459","ollama-is-not-the-product-building-production-ready-open-llm-applications","Ollama no es el producto: Construcción de aplicaciones de LLM abiertos listas para producción","Ejecutar un modelo local con Ollama es fácil. Construir una aplicación Open-LLM lista para producción es más difícil: requiere RAG, control de acceso, abstracción de proveedores, evaluación, registro, disciplina de despliegue y una capa de aplicación controlada alrededor del modelo.","\u002Fuploads\u002F2026\u002F06\u002Follama-is-not-the-product-building-production-ready-open-llm-applications-1782679361640-h0usqf.webp","2026-06-28T16:39:00.000Z",{"id":376,"slug":377,"title":378,"excerpt":379,"featuredImage":380,"publishedAt":381},"454","zbt-z8102ax-rm500u-ea-5g-modem-test","Quectel RM500U-EA en el ZBT Z8102AX: Bandas 5G, o2 Alemania y comportamiento de la señal en el mundo real","El ZBT Z8102AX utiliza un módem Quectel RM500U-EA para conectividad 4G y 5G. En la primera prueba práctica, el router se conectó con éxito a o2 Alemania con LTE Banda 3 y NR n28. El módem funciona, pero diagnósticos más profundos como RSRP, RSRQ, SINR, bloqueo de bandas y comportamiento de la celda aún necesitan pruebas adecuadas.","\u002Fuploads\u002F2026\u002F06\u002Fopenwrt-router-review-dual-sim-06-1781620597879-qay2sx.webp","2026-06-16T08:39:00.000Z",{"id":383,"slug":384,"title":385,"excerpt":386,"featuredImage":387,"publishedAt":388},"434","evaluation-harness","Guía completa de Evaluation Harness: Dominando la evaluación del rendimiento de LLM","Esta guía proporciona un recorrido detallado de Evaluation Harness, un marco de trabajo esencial para evaluar rigurosamente las capacidades de los modelos de lenguaje extensos (LLM) en los pipelines de LLMOps empresariales. Conozca la configuración, las mejores prácticas y las técnicas avanzadas para garantizar una evaluación comparativa y optimización de modelos confiables.","\u002Fuploads\u002F2026\u002F04\u002Fevaluation-harness-1775466944495-4s0xv2.webp","2026-03-01T17:50:00.000Z",{"id":390,"slug":391,"title":392,"excerpt":393,"featuredImage":394,"publishedAt":395},"468","ai-agent-memory-is-not-rag-how-to-separate-memory-retrieval-state-and-context","La memoria del agente de IA no es RAG: cómo separar memoria, recuperación, estado y contexto","La memoria del agente, RAG, el estado y el contexto a menudo se usan como si fueran intercambiables. No lo son. Este modelo práctico de arquitectura separa las cuatro capas, muestra dónde pertenece cada una y explica qué se rompe cuando los sistemas las colapsan en una sola.","\u002Fuploads\u002F2026\u002F09\u002Fai-agent-memory-is-not-rag-how-to-separate-memory-retrieval-state-and-context-1790350560308-np0xy6.webp","2026-09-25T11:34:00.000Z",{"id":397,"slug":398,"title":399,"excerpt":400,"featuredImage":401,"publishedAt":402},"445","qwen-3-6-in-production-release-runbook-ai-rollback-and-llmops-versioning","Qwen 3.6 en producción: Runbook de lanzamiento, rollback de IA y versionado de LLMOps","Qwen 3.6 no es solo otra actualización de modelo. Es un evento de lanzamiento, un escenario de reversión y un problema de versionado al mismo tiempo. Este artículo explica cómo debe manejarse Qwen 3.6 en producción a través de la disciplina de LLMOps, la trazabilidad de prompts y modelos, el despliegue controlado y la preparación para la reversión basada en evidencia.","\u002Fuploads\u002F2026\u002F02\u002Fnew-qwen-3-5-plus-1771515512741-dcbi9p.webp","2026-05-04T02:49:00.000Z",{"id":404,"slug":405,"title":406,"excerpt":407,"featuredImage":408,"publishedAt":409},"464","falsification-for-ai-reasoning-from-answers-to-tested-hypotheses","Falsación para el razonamiento de IA: De respuestas a hipótesis comprobadas","Los modelos de IA pueden generar evidencia convincente para casi cualquier hipótesis plausible. Una metodología más fiable plantea la pregunta opuesta: ¿qué evidencia debilitaría, contradiría o nos obligaría a abandonar la conclusión? Este artículo desarrolla un razonamiento orientado a la falsación para los LLM utilizando hipótesis rivales, pruebas discriminantes, contraevidencia y criterios de rechazo explícitos.","\u002Fuploads\u002F2026\u002F09\u002Ffalsification-for-ai-reasoning-from-answers-to-tested-hypotheses-1789811137616-3hce1b.webp","2026-09-19T01:11:00.000Z",{"id":411,"slug":412,"title":413,"excerpt":414,"featuredImage":415,"publishedAt":416},"435","ultimate-guide-to-acceptance-criteria-for-llm-adoption-in-enterprise-playbooks","Guía Definitiva de Criterios de Aceptación para la Adopción de LLM en Playbooks Empresariales","Domina el arte de definir criterios de aceptación precisos para garantizar una integración exitosa de LLM en tu entorno empresarial. Esta guía integral proporciona marcos accionables, ejemplos y mejores prácticas adaptados para la adopción impulsada por playbooks.","\u002Fuploads\u002F2026\u002F09\u002Fultimate-guide-to-acceptance-criteria-for-llm-adoption-in-enterprise-playbooks-1788540267775-zgr6mm.webp","2026-09-06T11:50:00.000Z",{"id":418,"slug":419,"title":420,"excerpt":421,"featuredImage":422,"publishedAt":423},"466","the-gpu-is-not-the-product-future-proof-private-ai-architecture","La GPU no es el producto: arquitectura de IA privada a prueba de futuro","La infraestructura de IA privada no debe diseñarse en torno a una sola GPU o un solo modelo. Un enfoque más resiliente combina GPUs de inferencia rápida, sistemas de IA ricos en memoria, nodos de IA física y modelos en la nube frontier opcionales detrás de una capa de enrutamiento consciente de las capacidades.","\u002Fuploads\u002F2026\u002F09\u002Fthe-gpu-is-not-the-product-future-proof-private-ai-architecture-1790140878812-8hsl39.webp","2026-09-23T01:19:00.000Z",{"id":425,"slug":426,"title":427,"excerpt":428,"featuredImage":429,"publishedAt":430},"457","should-you-buy-5g-openwrt-router-old-firmware","¿Deberías Comprar un Router OpenWrt 5G con Firmware Antiguo? El ZBT Z8102AX como Ejemplo Práctico","Comprar un router 5G OpenWrt con firmware antiguo puede tener sentido, pero solo bajo las condiciones adecuadas. El ZBT Z8102AX muestra claramente ambos lados: el hardware es útil, el módem funciona y el router se mantuvo estable en las pruebas, pero OpenWrt 21.02, el embalaje débil y las rutas de actualización poco claras requieren una decisión de compra cuidadosa.","\u002Fuploads\u002F2026\u002F06\u002Fopenwrt-router-review-dual-sim-05-1781620596218-5ldld4.webp","2026-06-16T10:41:00.000Z",{"id":432,"slug":433,"title":434,"excerpt":435,"featuredImage":436,"publishedAt":437},"451","test-dev-enterprise","Guía completa de Test DEv Enterprise Stajic.de: Arquitectura y mejores prácticas","Explore los principios arquitectónicos, los beneficios y los detalles técnicos de la gestión de un entorno de desarrollo y pruebas de nivel empresarial con Test DEv Enterprise Stajic.de.","\u002Fuploads\u002F2026\u002F05\u002Ftest-dev-enterprise-1779534260081-r4dvxn.webp","2026-05-22T23:01:00.000Z",{"id":439,"slug":440,"title":441,"excerpt":442,"featuredImage":443,"publishedAt":444},"477","computer-use-agents-why-a-successful-demo-can-still-be-an-unreliable-system","Agentes de uso de computadoras: por qué una demostración exitosa aún puede ser un sistema poco confiable","Los agentes de uso de computadoras ahora pueden completar impresionantes flujos de trabajo en el navegador y en el escritorio, pero una ejecución exitosa demuestra capacidad—no fiabilidad. Este artículo muestra cómo probar la repetibilidad, la robustez ambiental, el control de horizonte largo, la conciencia del estado, la verificación de resultados y la gestión segura de objetivos.","\u002Fuploads\u002F2026\u002F09\u002Fcomputer-use-agents-why-a-successful-demo-can-still-be-an-unreliable-system-1790352854690-75qnrg.webp","2026-09-25T12:13:00.000Z",{"id":446,"slug":447,"title":448,"excerpt":449,"featuredImage":450,"publishedAt":451},"479","where-does-an-llm-get-its-data-rag-data-sources-in-python","¿De dónde obtiene sus datos un LLM? Fuentes de datos RAG en Python","Un LLM no conoce mágicamente tus archivos, bases de datos o APIs. Esta continuación práctica de la serie RAG muestra, con Python sencillo, cómo los datos externos se convierten en evidencia recuperable: desde archivos de texto y SQL hasta búsqueda de texto completo, embeddings, ensamblaje de contexto y la llamada final al LLM.","\u002Fuploads\u002F2026\u002F09\u002Fwhere-does-an-llm-get-its-data-rag-data-sources-in-python-1790517200521-nfsi5i.webp","2026-09-27T05:51:00.000Z","fallback",[],[]]