[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"portal-settings:stajic:sr":3,"public-menus:all":38,"post:drag-and-drop-beispiel:sr":205,"related:post:drag-and-drop-beispiel:sr:1":433},{"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","sr","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":432},{"id":207,"title":208,"slug":209,"content":210,"contentJson":211,"excerpt":301,"featuredImage":302,"featuredImageAlt":303,"featuredImageCaption":10,"featuredImageTitle":10,"featuredImageCopyright":10,"featuredImageAuthor":10,"featuredImageSourceUrl":10,"featuredImageLicense":10,"featuredImageIsAiGenerated":43,"status":304,"publishedAt":305,"createdAt":306,"updatedAt":307,"seoLocalePaths":308,"categories":316,"author":317,"translations":322},"368","Prevucite i pustite sa JavaScript-om: Duboka analiza native API za interaktivne meniju strukture","drag-and-drop-beispiel","{\"time\":1701198000,\"blocks\":[{\"data\":{\"text\":\"Uvod u nativni drag-and-drop u JavaScript-u\",\"level\":2},\"type\":\"header\"},{\"data\":{\"text\":\"Interaktivne korisničke interfejs-ove (UI) su ključan deo moderne web-aplikacija. Mogućnost premještanja elemenata putem drag-and-drop-a znatno poboljšava korisničku izvore, posebno pri upravljanju popisima, menija ili organizaciji sadržaja. Dok su u prošlosti često potrebne složene biblioteke ili framework-ovi za implementaciju ove funkcionalnosti, nativna HTML5 Drag-and-Drop API nudi standardiziranu i performansno efikasnu rješenju koja se može koristiti direktno u Vanilla JavaScript-u.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Ovaj članak služi kao teorijsko istraživanje i demonstracija principa koje stojat iza implementacije funkcionalnosti drag-and-drop-a u JavaScript-u. Fokus je na preciznoj kontroliranju tokom podataka i obradi događaja potrebnih za novu raspoređivanje dinamičke strukture menija, npr.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Osnovne značajke nativnog HTML5 Drag-and-Drop API-ja\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"Nativni drag-and-drop API temelji se na seriji DOM-događaja i globalnom atributu `draggable`. Da bih element bio premještajem, ovaj atribut mora biti postavljen na `true`. Interakcija se sastoji od dva glavnog područja: izvorni element za povlačenje (Drag Source) i ciljno mjesto za spuštanje (Drop Target).\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Proces povlačenja i spuštanja je kontroliran definisanom nizom događaja koje moraju biti precizno obraditi kako bi se osigurala željena funkcionalnost. Uzrok toga je posebno važna ispravna obrada događaja `dragover`, jer su preporučeni preglednici blokirani od strane preglednika, ako nisu eksplicitno onemogućeni.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Prednosti nativne implementacije\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"Odabir za nativni HTML5 API umjesto vanjskih biblioteka pruža nekoliko tehnoloških i arhitekturnih prednosti:\"},\"type\":\"paragraph\"},{\"data\":{\"items\":[\"\u003Cstrong>Standardizacija i kompatibilnost preglednika:\u003C\u002Fstrong> API je standard web-a koji su svi moderne preglednici prirodnim načinom podržavaju, što smanjuje potrebu za polyfills.\",\"\u003Cstrong>Razina performansi:\u003C\u002Fstrong> Budući da je funkcionalnost implementirana nativno u pregledniku, razina performansi obično je viša od JavaScript-baziranih emulacija.\",\"\u003Cstrong>Pristupačnost (Accessibility):\u003C\u002Fstrong> Nativna implementacija može bolje interagirati s pomoćnim tehnologijama, pod uslovom da su odgovarajući ARIA atributi ispravno postavljeni.\",\"\u003Cstrong>Traženje i prenos podataka (Data Transfer):\u003C\u002Fstrong> API pruža dedikovano `DataTransfer` objekt koji omogućuje pohranjivanje MIME tipiziranih podataka (npr. tekst, URL-ovi ili korisnički definisane podatke) tokom procesa povlačenja i preuzimanje na cilju.\"],\"style\":\"unordered\"},\"type\":\"list\"},{\"data\":{\"text\":\"Tehnički detalji i obrada događaja\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"Implementacija zahtijeva praćenje i kontrolu minimalno šest centralnih događaja. Središnja funkcionalnost je `DataTransfer` objekt dostupan kroz događajne objekte koji služi kao privremeni pohranjivač informacija za premještanje.\"},\"type\":\"paragraph\"},{\"data\":{},\"type\":\"delimiter\"},{\"data\":{\"text\":\"Ključni događaji drag-and-drop ciklusa\",\"level\":4},\"type\":\"header\"},{\"data\":{\"text\":\"\u003Cstrong>1. dragstart:\u003C\u002Fstrong> Ovaj događaj se aktivira kad korisnik započne premještanje elementa. Tukaj moraju biti spremljene informacije za prenos u `dataTransfer` objektu, obično pomoću `event.dataTransfer.setData(format, data)`. Za novu raspoređivanje menija to bi mogao biti ID premještaju elementa.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>2. dragover:\u003C\u002Fstrong> Ovaj događaj se aktivira kontinuirano dok je premještaju element premeštan nad potencijalnim ciljem. Da bih omogućio spuštanje, standardna akcija preglednika mora biti eksplicitno onemogućena, obično pomoću `event.preventDefault()`. To signalizira pregledniku da je zona valjana Drop-Target.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>3. drop:\u003C\u002Fstrong> Ovaj događaj se aktivira kad element uspješno spusti nad ciljem. Tukaj su spremljene informacije iz `dragstart` preuzete pomoću `event.dataTransfer.getData(format)`. Nakon toga, slijedi stvarna DOM-manipulacija, npr. premještanje menija na novu poziciju u listi.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"\u003Cstrong>4. dragend:\u003C\u002Fstrong> Ovaj događaj se aktivira kad je proces povlačenja završen, bez obzira da li je spuštanj predstavljeno uspjeh ili prekinuto. Prednost primarno služi za čišćenje, kao što su vraćanje vizualnih stanja ili uklanjanje privremene klase.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Korištenje TypeScript-a\",\"level\":4},\"type\":\"header\"},{\"data\":{\"text\":\"Prilikom rada s složenim događajnim sistemima, kao što je drag-and-drop API, TypeScript pruža značajne prednosti. Točno tipizacija događajnih objekata (npr. `DragEvent` umjesto općeg `Event`) osigurava da razvijatelji mogu direktno pristupiti `dataTransfer` objektu, bez riziča za pogreške u vremenu izvršavanja. To povećava kvalitet koda i njegovu održivost, posebno u većim projektima temeljenih na Vanilla JavaScript-u.\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Primjeri upotrebe: Interaktivni meniji i više\",\"level\":3},\"type\":\"header\"},{\"data\":{\"text\":\"Mogućnost dinamičnog novu raspoređivanje elemenata je ključan za mnoge moderne web-aplikacije. Primer strukture menija je ovdje klasa primjer upotrebe. Kada se e-klasa upravljanja sadržajima (CMS) dopušta uređivanje redosleda navigacije, drag-and-drop se koristi za vizualno manipulisanje redosleda listnih elemenata (menija).\"},\"type\":\"paragraph\"},{\"data\":{\"text\":\"Dodatne tipične primjene uključuju:\"},\"type\":\"paragraph\"},{\"data\":{\"items\":[\"\u003Cstrong>Kanban tablice:\u003C\u002Fstrong> Premještanje kartica zadataka između različitih stupaca.\",\"\u003Cstrong>Dinamični meniji:\u003C\u002Fstrong> Dinamično uređivanje strukture menija.\",\"\u003Cstrong>Premještaj sadržaja:\u003C\u002Fstrong> Premještanje elemenata na web-stranicama.\"],\"style\":\"unordered\"},\"type\":\"list\"},{\"data\":{\"text\":\"Kontrola `DataTransfer` objekta i ispravne niske događaja je ključ za uspješnu implementaciju nativnog drag-and-drop-a u modernim web-aplikacijama.\",\"caption\":\"Tehnička zaključna reč\"},\"type\":\"quote\"}],\"version\":\"2.31\"}",{"time":212,"blocks":213,"version":300},1701198000,[214,218,222,225,229,232,235,238,241,250,253,256,259,262,265,268,271,274,277,280,283,286,289,295],{"data":215,"type":42},{"text":216,"level":217},"Uvod u nativni drag-and-drop u JavaScript-u",2,{"data":219,"type":221},{"text":220},"Interaktivne korisničke interfejs-ove (UI) su ključan deo moderne web-aplikacija. Mogućnost premještanja elemenata putem drag-and-drop-a znatno poboljšava korisničku izvore, posebno pri upravljanju popisima, menija ili organizaciji sadržaja. Dok su u prošlosti često potrebne složene biblioteke ili framework-ovi za implementaciju ove funkcionalnosti, nativna HTML5 Drag-and-Drop API nudi standardiziranu i performansno efikasnu rješenju koja se može koristiti direktno u Vanilla JavaScript-u.","paragraph",{"data":223,"type":221},{"text":224},"Ovaj članak služi kao teorijsko istraživanje i demonstracija principa koje stojat iza implementacije funkcionalnosti drag-and-drop-a u JavaScript-u. Fokus je na preciznoj kontroliranju tokom podataka i obradi događaja potrebnih za novu raspoređivanje dinamičke strukture menija, npr.",{"data":226,"type":42},{"text":227,"level":228},"Osnovne značajke nativnog HTML5 Drag-and-Drop API-ja",3,{"data":230,"type":221},{"text":231},"Nativni drag-and-drop API temelji se na seriji DOM-događaja i globalnom atributu `draggable`. Da bih element bio premještajem, ovaj atribut mora biti postavljen na `true`. Interakcija se sastoji od dva glavnog područja: izvorni element za povlačenje (Drag Source) i ciljno mjesto za spuštanje (Drop Target).",{"data":233,"type":221},{"text":234},"Proces povlačenja i spuštanja je kontroliran definisanom nizom događaja koje moraju biti precizno obraditi kako bi se osigurala željena funkcionalnost. Uzrok toga je posebno važna ispravna obrada događaja `dragover`, jer su preporučeni preglednici blokirani od strane preglednika, ako nisu eksplicitno onemogućeni.",{"data":236,"type":42},{"text":237,"level":228},"Prednosti nativne implementacije",{"data":239,"type":221},{"text":240},"Odabir za nativni HTML5 API umjesto vanjskih biblioteka pruža nekoliko tehnoloških i arhitekturnih prednosti:",{"data":242,"type":249},{"items":243,"style":248},[244,245,246,247],"\u003Cstrong>Standardizacija i kompatibilnost preglednika:\u003C\u002Fstrong> API je standard web-a koji su svi moderne preglednici prirodnim načinom podržavaju, što smanjuje potrebu za polyfills.","\u003Cstrong>Razina performansi:\u003C\u002Fstrong> Budući da je funkcionalnost implementirana nativno u pregledniku, razina performansi obično je viša od JavaScript-baziranih emulacija.","\u003Cstrong>Pristupačnost (Accessibility):\u003C\u002Fstrong> Nativna implementacija može bolje interagirati s pomoćnim tehnologijama, pod uslovom da su odgovarajući ARIA atributi ispravno postavljeni.","\u003Cstrong>Traženje i prenos podataka (Data Transfer):\u003C\u002Fstrong> API pruža dedikovano `DataTransfer` objekt koji omogućuje pohranjivanje MIME tipiziranih podataka (npr. tekst, URL-ovi ili korisnički definisane podatke) tokom procesa povlačenja i preuzimanje na cilju.","unordered","list",{"data":251,"type":42},{"text":252,"level":228},"Tehnički detalji i obrada događaja",{"data":254,"type":221},{"text":255},"Implementacija zahtijeva praćenje i kontrolu minimalno šest centralnih događaja. Središnja funkcionalnost je `DataTransfer` objekt dostupan kroz događajne objekte koji služi kao privremeni pohranjivač informacija za premještanje.",{"data":257,"type":258},{},"delimiter",{"data":260,"type":42},{"text":261,"level":46},"Ključni događaji drag-and-drop ciklusa",{"data":263,"type":221},{"text":264},"\u003Cstrong>1. dragstart:\u003C\u002Fstrong> Ovaj događaj se aktivira kad korisnik započne premještanje elementa. Tukaj moraju biti spremljene informacije za prenos u `dataTransfer` objektu, obično pomoću `event.dataTransfer.setData(format, data)`. Za novu raspoređivanje menija to bi mogao biti ID premještaju elementa.",{"data":266,"type":221},{"text":267},"\u003Cstrong>2. dragover:\u003C\u002Fstrong> Ovaj događaj se aktivira kontinuirano dok je premještaju element premeštan nad potencijalnim ciljem. Da bih omogućio spuštanje, standardna akcija preglednika mora biti eksplicitno onemogućena, obično pomoću `event.preventDefault()`. To signalizira pregledniku da je zona valjana Drop-Target.",{"data":269,"type":221},{"text":270},"\u003Cstrong>3. drop:\u003C\u002Fstrong> Ovaj događaj se aktivira kad element uspješno spusti nad ciljem. Tukaj su spremljene informacije iz `dragstart` preuzete pomoću `event.dataTransfer.getData(format)`. Nakon toga, slijedi stvarna DOM-manipulacija, npr. premještanje menija na novu poziciju u listi.",{"data":272,"type":221},{"text":273},"\u003Cstrong>4. dragend:\u003C\u002Fstrong> Ovaj događaj se aktivira kad je proces povlačenja završen, bez obzira da li je spuštanj predstavljeno uspjeh ili prekinuto. Prednost primarno služi za čišćenje, kao što su vraćanje vizualnih stanja ili uklanjanje privremene klase.",{"data":275,"type":42},{"text":276,"level":46},"Korištenje TypeScript-a",{"data":278,"type":221},{"text":279},"Prilikom rada s složenim događajnim sistemima, kao što je drag-and-drop API, TypeScript pruža značajne prednosti. Točno tipizacija događajnih objekata (npr. `DragEvent` umjesto općeg `Event`) osigurava da razvijatelji mogu direktno pristupiti `dataTransfer` objektu, bez riziča za pogreške u vremenu izvršavanja. To povećava kvalitet koda i njegovu održivost, posebno u većim projektima temeljenih na Vanilla JavaScript-u.",{"data":281,"type":42},{"text":282,"level":228},"Primjeri upotrebe: Interaktivni meniji i više",{"data":284,"type":221},{"text":285},"Mogućnost dinamičnog novu raspoređivanje elemenata je ključan za mnoge moderne web-aplikacije. Primer strukture menija je ovdje klasa primjer upotrebe. Kada se e-klasa upravljanja sadržajima (CMS) dopušta uređivanje redosleda navigacije, drag-and-drop se koristi za vizualno manipulisanje redosleda listnih elemenata (menija).",{"data":287,"type":221},{"text":288},"Dodatne tipične primjene uključuju:",{"data":290,"type":249},{"items":291,"style":248},[292,293,294],"\u003Cstrong>Kanban tablice:\u003C\u002Fstrong> Premještanje kartica zadataka između različitih stupaca.","\u003Cstrong>Dinamični meniji:\u003C\u002Fstrong> Dinamično uređivanje strukture menija.","\u003Cstrong>Premještaj sadržaja:\u003C\u002Fstrong> Premještanje elemenata na web-stranicama.",{"data":296,"type":299},{"text":297,"caption":298},"Kontrola `DataTransfer` objekta i ispravne niske događaja je ključ za uspješnu implementaciju nativnog drag-and-drop-a u modernim web-aplikacijama.","Tehnička zaključna reč","quote","2.31","Implementacija funkcionalnosti povlačenja i otpuštanja je ključna za moderne, interaktivne korisničke sučelje. Ovaj članak istražuje tehnološku implementaciju pomoću native HTML5 API-ja za povlačenje i otpuštanje u Vanilla JavaScript i TypeScript-u, sa naglaskom na stvaranje dinamičkih struktura menija.","\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":309,"de":310,"sr":311,"es":312,"fr":313,"it":314,"ru":315},"\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":318,"login":319,"email":320,"displayName":321},"20","rooth8233","aleksandar@stajic.de","Aleksandar Stajić",[323,379],{"lang":324,"title":325,"content":326,"contentJson":327,"excerpt":378},"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":328,"blocks":329,"version":300},1766878193013,[330,334,338,342,346,350,354,358,362,366,370,374],{"id":331,"data":332,"type":221},"01dd050d903fcb9e",{"text":333},"Standardization and Browser Compatibility:",{"id":335,"data":336,"type":221},"9917f0a669c86dbb",{"text":337},"Performance:",{"id":339,"data":340,"type":221},"3d9ca1fe7cbb09aa",{"text":341},"Accessibility (A11y):",{"id":343,"data":344,"type":221},"68d79fc9715111dc",{"text":345},"Data Transfer:",{"id":347,"data":348,"type":221},"939fa84f857a360f",{"text":349},"1. dragstart:",{"id":351,"data":352,"type":221},"f0973cb9e0474b6f",{"text":353},"2. dragover:",{"id":355,"data":356,"type":221},"5e6fd33d47cbce7e",{"text":357},"3. drop:",{"id":359,"data":360,"type":221},"49bb52aafa18afe0",{"text":361},"4. dragend:",{"id":363,"data":364,"type":221},"b8e993098ff471b9",{"text":365},"Kanban Boards:",{"id":367,"data":368,"type":221},"832ed3df4e85e5c8",{"text":369},"File Managers:",{"id":371,"data":372,"type":221},"8d80f58bd66ea31c",{"text":373},"E-Commerce Configurators:",{"id":375,"data":376,"type":221},"a2dfe8c46ea3655e",{"text":377},"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":380,"excerpt":301},{"time":212,"blocks":381,"version":300},[382,384,386,388,390,392,394,396,398,401,403,405,407,409,411,413,415,417,419,421,423,425,427,430],{"data":383,"type":42},{"text":216,"level":217},{"data":385,"type":221},{"text":220},{"data":387,"type":221},{"text":224},{"data":389,"type":42},{"text":227,"level":228},{"data":391,"type":221},{"text":231},{"data":393,"type":221},{"text":234},{"data":395,"type":42},{"text":237,"level":228},{"data":397,"type":221},{"text":240},{"data":399,"type":249},{"items":400,"style":248},[244,245,246,247],{"data":402,"type":42},{"text":252,"level":228},{"data":404,"type":221},{"text":255},{"data":406,"type":258},{},{"data":408,"type":42},{"text":261,"level":46},{"data":410,"type":221},{"text":264},{"data":412,"type":221},{"text":267},{"data":414,"type":221},{"text":270},{"data":416,"type":221},{"text":273},{"data":418,"type":42},{"text":276,"level":46},{"data":420,"type":221},{"text":279},{"data":422,"type":42},{"text":282,"level":228},{"data":424,"type":221},{"text":285},{"data":426,"type":221},{"text":288},{"data":428,"type":249},{"items":429,"style":248},[292,293,294],{"data":431,"type":299},{"text":297,"caption":298},"Post erfolgreich abgerufen",{"items":434,"source":517,"manualIds":518,"manualMatchedIds":519},[435,442,449,456,463,470,477,484,491,498,505,512],{"id":436,"slug":437,"title":438,"excerpt":439,"featuredImage":440,"publishedAt":441},"381","enterprise-grade-multi-tenant-architecture-for-an-international-platform","Višezakupna arhitektura korporativnog nivoa za međunarodnu platformu","Loving Rocks je platforma za venčanja poslovne klase, dizajnirana sa istinskom više-zakupnom arhitekturom, izolovanim bazama podataka po zakupcu i ugrađenom internacionalizacijom za globalnu skalabilnost, bezbednost i dugoročnu operativnu stabilnost.","\u002Fuploads\u002F2026\u002F01\u002Fenterprise-grade-multi-tenant-architecture-for-an-international-platform-1769789121298-b6v7ak.webp","2026-01-30T12:04:00.000Z",{"id":443,"slug":444,"title":445,"excerpt":446,"featuredImage":447,"publishedAt":448},"436","triggers","Sveobuhvatni vodič za okidače povlačenja u poslovnim AI runbooks-ovima","Ovaj vodič istražuje Rollback Triggers, ključne mehanizme u enterprise AI runbooks koji automatski otkrivaju anomalije i pokreću rollback-ove radi održavanja stabilnosti sistema. Naučite kako da konfigurišete, nadgledate i optimizujete ove triggere za robusne AI deploymente.","\u002Fuploads\u002F2026\u002F06\u002Ftriggers-1781855500994-cibuou.webp","2026-03-01T16:51:00.000Z",{"id":450,"slug":451,"title":452,"excerpt":453,"featuredImage":454,"publishedAt":455},"375","database-marketing","Marketing baze podataka: Moderan pristup odnosima sa klijentima","Marketing baza podataka je neophodan za moderno upravljanje odnosima sa klijentima. Saznajte kako strateško korišćenje podataka, tehnička ekspertiza i inovacije pokreću personalizovane interakcije sa klijentima i održivi rast.","\u002Fuploads\u002F2025\u002F01\u002FDatabasemarketing.png-medium.webp","2025-01-06T00:20:00.000Z",{"id":457,"slug":458,"title":459,"excerpt":460,"featuredImage":461,"publishedAt":462},"460","ai-agent-reliability-why-the-final-answer-is-not-enough","Pouzdanost AI agenata: Zašto konačni odgovor nije dovoljan","Tačan rezultat ne dokazuje ispravno razmišljanje, bezbedno izvršavanje ili pouzdan sistem.","\u002Fuploads\u002F2026\u002F09\u002Fai-agent-reliability-why-the-final-answer-is-not-enough-1788955466306-pl0qhz.webp","2026-09-09T04:01:00.000Z",{"id":464,"slug":465,"title":466,"excerpt":467,"featuredImage":468,"publishedAt":469},"2","multi-database-architecture","Arhitektura više baza podataka sa Prisma 7: Duboki zaron za stručnjake","Upravljanje složenim pejzažima podataka zahteva moderne arhitekture. Prisma 7 nudi napredne funkcije za integraciju više baza podataka i rešava izazove poliglotne perzistencije.","\u002Fuploads\u002F2014\u002F09\u002FSEO-Mobile-Webapplikation-Muenchen-www.stajic.de_1.webp","2025-10-31T04:31:00.000Z",{"id":471,"slug":472,"title":473,"excerpt":474,"featuredImage":475,"publishedAt":476},"457","should-you-buy-5g-openwrt-router-old-firmware","Treba li kupiti 5G OpenWrt ruter sa starim firmverom? ZBT Z8102AX kao praktičan primer","Kupovina 5G OpenWrt rutera sa starijim firmverom može imati smisla, ali samo pod pravim uslovima. ZBT Z8102AX jasno pokazuje obe strane: hardver je koristan, modem radi, a ruter je ostao stabilan u testiranju, ali OpenWrt 21.02, slabo pakovanje i nejasni putevi nadogradnje zahtevaju pažljivu odluku o kupovini.","\u002Fuploads\u002F2026\u002F06\u002Fopenwrt-router-review-dual-sim-05-1781620596218-5ldld4.webp","2026-06-16T10:41:00.000Z",{"id":478,"slug":479,"title":480,"excerpt":481,"featuredImage":482,"publishedAt":483},"434","evaluation-harness","Sveobuhvatan vodič za Evaluation Harness: Ovladavanje evaluacijom performansi LLM-ova","Ovaj vodič pruža detaljan pregled Evaluation Harness-a, ključnog okvira za rigoroznu procenu sposobnosti velikih jezičkih modela (LLM) u korporativnim LLMOps procesima. Naučite podešavanje, najbolje prakse i napredne tehnike kako biste osigurali pouzdano benčmarkovanje i optimizaciju modela.","\u002Fuploads\u002F2026\u002F04\u002Fevaluation-harness-1775466944495-4s0xv2.webp","2026-03-01T17:50:00.000Z",{"id":485,"slug":486,"title":487,"excerpt":488,"featuredImage":489,"publishedAt":490},"450","google-io-2026-gemini-omni-and-gemini-3-5","Google I\u002FO 2026: Gemini Omni, Gemini 3.5 i računarski sloj iza agentske veštačke inteligencije","Google I\u002FO 2026 je postavio Gemini Omni i Gemini 3.5 u središte Google-ove strategije za agentsku veštačku inteligenciju. Ovaj članak analizira razliku između multimodalnog kreiranja i inteligencije na nivou delovanja, zašto je Gemini 3.5 Flash važan za agente i kodiranje, i kako ovi modeli pokreću širu promenu platforme Google I\u002FO 2026.","\u002Fuploads\u002F2026\u002F05\u002Fgoogle-io-2026-gemini-omni-and-gemini-3-5-1779227791401-6hzln1.webp","2026-05-21T11:01:00.000Z",{"id":492,"slug":493,"title":494,"excerpt":495,"featuredImage":496,"publishedAt":497},"360","ubuntu-debian-doppelte-apt-paketquellen-entfernen","Ukloniti dvostruke APT-paketa izvore: Ekspertni priruk za Ubuntu i Debian","Detaljna uputstva za identifikovanje i uklanjanje prekomernih ili duplikatnih izvora APT-paketa u sistemima Debian i Ubuntu kako bi se osigurala stabilnost i performanse.","\u002Fuploads\u002F2022\u002F05\u002FUbuntu-APT-Paketquellen-www.stajic.de_.webp","2025-05-02T09:09:00.000Z",{"id":499,"slug":500,"title":501,"excerpt":502,"featuredImage":503,"publishedAt":504},"452","zbt-z8102ax-5g-openwrt-router-review-dual-sim-rm500u-ea-and-an-honest-assessment","Recenzija ZBT Z8102AX 5G OpenWrt rutera: Dual SIM, RM500U-EA i iskrena ocena","ZBT Z8102AX je neobičan 5G ruter sa OpenWrt osnovom, dual-SIM konceptom i Quectel RM500U-EA modemom. Na testiranju pokazuje jasne prednosti u fleksibilnosti, interfejsima i mobilnoj povezivosti, ali i tipične slabosti OpenWrt verzije koju je modifikovao proizvođač.","\u002Fuploads\u002F2026\u002F06\u002Fopenwrt-router-review-dual-sim-01-1781620588908-fwmzj7.webp","2026-06-16T07:34:00.000Z",{"id":506,"slug":507,"title":508,"excerpt":509,"featuredImage":510,"publishedAt":511},"466","the-gpu-is-not-the-product-future-proof-private-ai-architecture","GPU nije proizvod: Privatna AI arhitektura spremna za budućnost","Privatna AI infrastruktura ne bi trebalo da bude projektovana oko jednog GPU-a ili jednog modela. Otporniji pristup kombinuje brze GPU-ove za inferenciju, memorijski bogate AI sisteme, čvorove za fizički AI i opcione vodeće modele u oblaku iza sloja za rutiranje koji prepoznaje mogućnosti.","\u002Fuploads\u002F2026\u002F09\u002Fthe-gpu-is-not-the-product-future-proof-private-ai-architecture-1790140878812-8hsl39.webp","2026-09-23T01:19:00.000Z",{"id":513,"slug":514,"title":514,"excerpt":10,"featuredImage":515,"publishedAt":516},"367","erstellen-eines-benutzerdefinierten-gpt-4-plugins-in-wordpress","\u002Fuploads\u002F2024\u002F05\u002FDALL·E-2024-05-22-00.05.58-A-screenshot-of-a-WordPress-dashboard-showing-a-custom-plugin-creation.-The-screen-includes-sections-for-plugin-name-description-author-and-code-ed-large.webp","2024-05-22T02:05:12.000Z","fallback",[],[]]