Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimi (UX), ba\u015far\u0131n\u0131n anahtarlar\u0131ndan biridir. Kullan\u0131c\u0131lar\u0131n aray\u00fczle etkile\u015fimini kolayla\u015ft\u0131ran ve sezgisel hale getiren \u00f6zellikler, uygulaman\u0131n benimsenme oran\u0131n\u0131 art\u0131r\u0131r. Bu \u00f6zelliklerden biri de “s\u00fcr\u00fckle ve b\u0131rak” (Drag & Drop) i\u015flevselli\u011fidir. Dosya y\u00fcklemelerinden, liste s\u0131ralamalar\u0131na, panolar aras\u0131 g\u00f6rev ta\u015f\u0131malardan, g\u00f6rsel d\u00fczenleyicilere kadar pek \u00e7ok senaryoda s\u00fcr\u00fckle ve b\u0131rak, kullan\u0131c\u0131lar\u0131n i\u015f ak\u0131\u015f\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde h\u0131zland\u0131r\u0131r.<\/p>\n
Angular gibi g\u00fc\u00e7l\u00fc bir \u00f6n y\u00fcz framework’\u00fc ile uygulama geli\u015ftirirken, s\u00fcr\u00fckle ve b\u0131rak gibi karma\u015f\u0131k g\u00f6r\u00fcnen \u00f6zellikleri entegre etmek i\u00e7in haz\u0131r ve g\u00fcvenilir \u00e7\u00f6z\u00fcmlere ihtiya\u00e7 duyar\u0131z. \u0130\u015fte tam bu noktada Angular uygulamalar\u0131n\u0131za s\u00fcr\u00fckle ve b\u0131rak \u00f6zelli\u011fi eklemek i\u00e7in birden fazla yol vard\u0131r. Kendi \u00e7\u00f6z\u00fcm\u00fcn\u00fcz\u00fc s\u0131f\u0131rdan yazabilir, \u00d6ncelikle, * Basitlik ve H\u0131z:<\/strong> Kurulumu ve kullan\u0131m\u0131 son derece kolayd\u0131r. Sadece birka\u00e7 sat\u0131r kod ile s\u00fcr\u00fckle ve b\u0131rak i\u015flevselli\u011fini uygulaman\u0131za dahil edebilirsiniz. Bu avantajlar, \u00f6zellikle h\u0131zl\u0131 prototipleme yaparken veya karma\u015f\u0131k olmayan ancak sa\u011flam bir s\u00fcr\u00fckle ve b\u0131rak \u00e7\u00f6z\u00fcm\u00fcne ihtiya\u00e7 duydu\u011funuzda Angular uygulaman\u0131za Ba\u015flamadan \u00f6nce a\u015fa\u011f\u0131daki ara\u00e7lar\u0131n sisteminizde kurulu oldu\u011fundan emin olun:<\/p>\n * Node.js ve npm:<\/strong> Angular CLI i\u00e7in gereklidir. E\u011fer halihaz\u0131rda bir Angular projeniz yoksa, yeni bir proje olu\u015fturarak ba\u015flayabiliriz:<\/p>\n Bu komut, Projenizin dizinine ge\u00e7tikten sonra, Bu komut, k\u00fct\u00fcphaneleri projenizin Alternatif olarak, Bu ad\u0131mlar\u0131 tamamlad\u0131ktan sonra, Bir s\u00fcr\u00fckle ve b\u0131rak kapsay\u0131c\u0131s\u0131 olu\u015fturmak i\u00e7in, \u00f6\u011feleri i\u00e7erecek HTML elementine ( Burada: Bile\u015feninizde ( Yukar\u0131daki kodda, \u00d6\u011felerin daha belirgin g\u00f6r\u00fcnmesi ve s\u00fcr\u00fckleme s\u0131ras\u0131nda g\u00f6rsel ipu\u00e7lar\u0131 sa\u011flamak i\u00e7in basit bir CSS ekleyebiliriz:<\/p>\n Bu temel kurulum ile, \u00c7o\u011fu zaman, \u00f6\u011feleri sadece tek bir liste i\u00e7inde s\u0131ralamakla kalmay\u0131z; ayn\u0131 zamanda farkl\u0131 listeler veya panolar aras\u0131nda da ta\u015f\u0131mak isteriz. Birden fazla kapsay\u0131c\u0131 aras\u0131nda s\u00fcr\u00fckle ve b\u0131rak i\u015flevselli\u011fi sa\u011flamak i\u00e7in, t\u00fcm kapsay\u0131c\u0131lar\u0131n\u0131za ayn\u0131 Burada \u00fc\u00e7 farkl\u0131 Bile\u015feninizde, her bir liste i\u00e7in ayr\u0131 bir dizi tan\u0131mlaman\u0131z gerekecek:<\/p>\n Bu \u00f6rnekte, Kanban benzeri bir pano g\u00f6r\u00fcn\u00fcm\u00fc i\u00e7in CSS’i biraz daha geli\u015ftirebiliriz:<\/p>\n Bu CSS ile, Kanban benzeri \u00fc\u00e7 s\u00fctunlu bir pano elde edersiniz ve \u00f6\u011feleri s\u00fcr\u00fckleyip b\u0131rakarak durumlar\u0131n\u0131 de\u011fi\u015ftirebilirsiniz. * Bu olaylara Bu olaylar\u0131 dinleyerek, s\u00fcr\u00fckle ve b\u0131rak i\u015flemlerinin her a\u015famas\u0131nda \u00f6zel mant\u0131k y\u00fcr\u00fctebilir, g\u00f6rsel geri bildirim sa\u011flayabilir ve veri modelinizi senkronize edebilirsiniz.<\/p>\n Yayg\u0131n kullan\u0131lan baz\u0131 se\u00e7enekler ve a\u00e7\u0131klamalar\u0131:<\/p>\n * Bu se\u00e7enekleri kullanarak, uygulaman\u0131z\u0131n s\u00fcr\u00fckle ve b\u0131rak etkile\u015fimlerini hassas bir \u015fekilde kontrol edebilir ve kullan\u0131c\u0131lar\u0131n\u0131z i\u00e7in \u00f6zel deneyimler olu\u015fturabilirsiniz.<\/p>\n S\u00fcr\u00fckle ve b\u0131rak i\u015flemleri genellikle uygulaman\u0131n durumunu de\u011fi\u015ftirir. Bu de\u011fi\u015fikliklerin kullan\u0131c\u0131 oturumlar\u0131 aras\u0131nda veya farkl\u0131 cihazlarda kal\u0131c\u0131 olmas\u0131 i\u00e7in, durumu bir arka u\u00e7 servisine (API) veya yerel depolamaya kaydetmeniz gerekir.<\/p>\n Bu yakla\u015f\u0131m, kullan\u0131c\u0131 bir \u00f6\u011feyi s\u00fcr\u00fckleyip b\u0131rakt\u0131\u011f\u0131nda, uygulaman\u0131z\u0131n arka plandaki veritaban\u0131n\u0131 veya di\u011fer kal\u0131c\u0131 depolama alanlar\u0131n\u0131 g\u00fcncelleyebilmesini sa\u011flar.<\/p>\n Yukar\u0131daki \u00f6rneklerde S\u00fcr\u00fckle ve b\u0131rak aray\u00fczleri, fare veya dokunmatik ekran kullan\u0131c\u0131lar\u0131 i\u00e7in sezgisel olsa da, klavye veya yard\u0131mc\u0131 teknoloji kullanan kullan\u0131c\u0131lar i\u00e7in eri\u015filebilirlik sorunlar\u0131 yaratabilir. * Klavye Kontrolleri:<\/strong> \u00d6\u011feleri klavye ile se\u00e7me, ta\u015f\u0131ma ve b\u0131rakma mekanizmalar\u0131 ekleyin (\u00f6rne\u011fin, ok tu\u015flar\u0131 ile ta\u015f\u0131ma, Enter tu\u015fu ile b\u0131rakma).ng2-dragula<\/code> devreye giriyor. ng2-dragula<\/code>, pop\u00fcler Dragula k\u00fct\u00fcphanesini Angular ekosistemine ta\u015f\u0131yan, kullan\u0131m\u0131 kolay ve esnek bir \u00e7\u00f6z\u00fcmd\u00fcr. Bu makalede, ng2-dragula<\/code>‘n\u0131n ne oldu\u011funu, neden tercih edilmesi gerekti\u011fini, temel ve ileri d\u00fczey kullan\u0131mlar\u0131n\u0131, \u00f6zelle\u015ftirme se\u00e7eneklerini, ger\u00e7ek d\u00fcnya senaryolar\u0131n\u0131 ve en iyi uygulamalar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\nNeden ng2-dragula?<\/h2>\n
@angular\/cdk\/drag-drop<\/code> gibi Angular’\u0131n resmi bile\u015fen k\u00fct\u00fcphanesini kullanabilir veya ng2-dragula<\/code> gibi \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphanelere y\u00f6nelebilirsiniz. Peki, ng2-dragula<\/code>‘y\u0131 di\u011ferlerinden ay\u0131ran ve onu cazip k\u0131lan \u00f6zellikler nelerdir?<\/p>\nng2-dragula<\/code>, Dragula<\/code> k\u00fct\u00fcphanesinin kan\u0131tlanm\u0131\u015f sa\u011flaml\u0131\u011f\u0131n\u0131 ve basitli\u011fini Angular d\u00fcnyas\u0131na ta\u015f\u0131r. Dragula<\/code>, \u00f6zellikle listeler aras\u0131nda veya ayn\u0131 liste i\u00e7inde \u00f6\u011feleri s\u00fcr\u00fckleyip b\u0131rakma i\u015flemleri i\u00e7in tasarlanm\u0131\u015f, hafif ve ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 az bir JavaScript k\u00fct\u00fcphanesidir. ng2-dragula<\/code> bu temeli alarak, Angular’\u0131n mod\u00fcler yap\u0131s\u0131na ve bile\u015fen tabanl\u0131 mimarisine m\u00fckemmel bir \u015fekilde entegre olur.<\/p>\nng2-dragula<\/code>‘n\u0131n temel avantajlar\u0131 \u015funlard\u0131r:<\/p>\n
\n* Esneklik:<\/strong> Tek bir kapsay\u0131c\u0131 i\u00e7inde s\u0131ralama, birden fazla kapsay\u0131c\u0131 aras\u0131nda \u00f6\u011fe ta\u015f\u0131ma veya belirli kurallara g\u00f6re s\u00fcr\u00fckleme\/b\u0131rakma i\u015flemlerini kontrol etme gibi \u00e7e\u015fitli senaryolar\u0131 destekler.
\n* Olay Tabanl\u0131 Mimari:<\/strong> S\u00fcr\u00fckleme, b\u0131rakma, \u00f6\u011fe \u00fczerine gelme gibi \u00e7e\u015fitli olaylar\u0131 dinleyerek uygulaman\u0131z\u0131n davran\u0131\u015f\u0131n\u0131 \u00f6zelle\u015ftirebilirsiniz. Bu, karma\u015f\u0131k i\u015f mant\u0131klar\u0131n\u0131 entegre etmek i\u00e7in g\u00fc\u00e7l\u00fc bir mekanizma sunar.
\n* G\u00f6rsel \u00d6zelle\u015ftirme:<\/strong> S\u00fcr\u00fcklenen \u00f6\u011felerin, b\u0131rakma b\u00f6lgelerinin ve ge\u00e7ici yer tutucular\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc CSS ile kolayca de\u011fi\u015ftirebilirsiniz.
\n* Veri Odakl\u0131 Yakla\u015f\u0131m:<\/strong> dragulaModel<\/code> direktifi sayesinde, s\u00fcr\u00fckle ve b\u0131rak i\u015flemleri do\u011frudan veri modelinizle senkronize olur. Bu, uygulaman\u0131z\u0131n durumunu y\u00f6netmeyi basitle\u015ftirir.<\/p>\nng2-dragula<\/code>‘y\u0131 ideal bir se\u00e7enek haline getirir.<\/p>\nng2-dragula ile Ba\u015flang\u0131\u00e7<\/h2>\n
ng2-dragula<\/code>‘y\u0131 entegre etmek olduk\u00e7a basit bir s\u00fcre\u00e7tir. \u0130\u015fte ad\u0131m ad\u0131m yapman\u0131z gerekenler:<\/p>\n\u00d6n Gereksinimler<\/h3>\n
\n* Angular CLI:<\/strong> npm install -g @angular\/cli<\/code> komutuyla kurabilirsiniz.
\n* Temel Angular Bilgisi:<\/strong> Bile\u015fenler, mod\u00fcller, direktifler ve servisler hakk\u0131nda temel bilgiye sahip olman\u0131z \u00f6nerilir.<\/p>\nYeni Bir Angular Projesi Olu\u015fturma<\/h3>\n
ng new my-drag-drop-app --routing false --style scss\ncd my-drag-drop-app<\/code><\/pre>\nmy-drag-drop-app<\/code> ad\u0131nda yeni bir Angular projesi olu\u015fturacak ve SCSS stil dosyalar\u0131n\u0131 kullanacak \u015fekilde yap\u0131land\u0131racakt\u0131r.<\/p>\nng2-dragula Kurulumu<\/h3>\n
ng2-dragula<\/code> ve temel ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olan dragula<\/code> k\u00fct\u00fcphanelerini npm arac\u0131l\u0131\u011f\u0131yla kurun:<\/p>\nnpm install ng2-dragula dragula --save<\/code><\/pre>\nnode_modules<\/code> klas\u00f6r\u00fcne indirecek ve package.json<\/code> dosyan\u0131za ba\u011f\u0131ml\u0131l\u0131k olarak ekleyecektir.<\/p>\nMod\u00fcl\u00fc \u0130\u00e7eri Aktarma<\/h3>\n
ng2-dragula<\/code>‘y\u0131 kullanabilmek i\u00e7in, uygulaman\u0131z\u0131n ana mod\u00fcl\u00fcne (app.module.ts<\/code> veya ilgili feature mod\u00fcl\u00fcn\u00fcze) DragulaModule<\/code>‘\u00fc i\u00e7eri aktarman\u0131z gerekir:<\/p>\n\/\/ src\/app\/app.module.ts\nimport { NgModule } from '@angular\/core';\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { DragulaModule } from 'ng2-dragula'; \/\/ ng2-dragula mod\u00fcl\u00fcn\u00fc import ediyoruz\n\nimport { AppComponent } from '.\/app.component';\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n DragulaModule.forRoot() \/\/ DragulaModule'\u00fc forRoot() ile import ediyoruz\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/code><\/pre>\nDragulaModule.forRoot()<\/code> metodunu kullanmak \u00f6nemlidir, \u00e7\u00fcnk\u00fc bu, DragulaService<\/code>‘in uygulama genelinde tek bir \u00f6rne\u011finin (singleton) sa\u011flanmas\u0131n\u0131 garanti eder. E\u011fer bir feature mod\u00fcl\u00fcnde kullanacaksan\u0131z, DragulaModule<\/code>‘\u00fc forRoot()<\/code> olmadan import edebilirsiniz.<\/p>\nCSS Dosyalar\u0131n\u0131 \u0130\u00e7eri Aktarma<\/h3>\n
ng2-dragula<\/code>‘n\u0131n varsay\u0131lan stilini kullanmak i\u00e7in, dragula<\/code>‘n\u0131n CSS dosyas\u0131n\u0131 uygulaman\u0131za dahil etmeniz gerekir. Bunu yapman\u0131n en yayg\u0131n yolu, angular.json<\/code> dosyan\u0131zdaki styles<\/code> dizisine eklemektir:<\/p>\n\/\/ angular.json\n\"styles\": [\n \"src\/styles.scss\",\n \"node_modules\/dragula\/dist\/dragula.min.css\" \/\/ Dragula CSS'ini buraya ekliyoruz\n],<\/code><\/pre>\nsrc\/styles.scss<\/code> (veya src\/styles.css<\/code>) dosyan\u0131za do\u011frudan import edebilirsiniz:<\/p>\n\/ src\/styles.scss <\/em>\/\n@import 'dragula\/dist\/dragula.min.css';<\/code><\/pre>\nng2-dragula<\/code>‘y\u0131 Angular uygulaman\u0131zda kullanmaya haz\u0131rs\u0131n\u0131z demektir.<\/p>\nTemel Kullan\u0131m: Tekli S\u00fcr\u00fckle ve B\u0131rak Kapsay\u0131c\u0131s\u0131<\/h2>\n
ng2-dragula<\/code> ile s\u00fcr\u00fckle ve b\u0131rak i\u015flevselli\u011fini uygulaman\u0131n en basit yolu, tek bir liste i\u00e7indeki \u00f6\u011feleri yeniden s\u0131ralamakt\u0131r.<\/p>\nHTML Yap\u0131s\u0131<\/h3>\n
div<\/code>, ul<\/code>, ol<\/code> vb.) [dragula]<\/code> direktifini eklemeniz yeterlidir. Ayr\u0131ca, [(dragulaModel)]<\/code> direktifi ile veri modelinizi bu kapsay\u0131c\u0131ya ba\u011flayabilirsiniz.<\/p>\n\nYap\u0131lacaklar Listesi<\/h2>\n
\n
\n* [dragula]=\"'my-bag'\"<\/code>: Bu direktif, ul<\/code> elementini “my-bag” ad\u0131nda bir Dragula grubuna dahil eder. Ayn\u0131 gruptaki t\u00fcm kapsay\u0131c\u0131lar aras\u0131nda s\u00fcr\u00fckle ve b\u0131rak i\u015flemi yap\u0131labilir. Tek bir kapsay\u0131c\u0131 olsa bile bir grup ad\u0131 vermek iyi bir pratiktir.
\n* [(dragulaModel)]=\"tasks\"<\/code>: Bu direktif, tasks<\/code> adl\u0131 dizi ile s\u00fcr\u00fckle ve b\u0131rak kapsay\u0131c\u0131s\u0131 aras\u0131ndaki iki y\u00f6nl\u00fc veri ba\u011flamay\u0131 sa\u011flar. \u00d6\u011felerin s\u0131ras\u0131 de\u011fi\u015fti\u011finde, tasks<\/code> dizisi otomatik olarak g\u00fcncellenir.
\n <\/em>ngFor=\"let task of tasks\"<\/code>: Her bir g\u00f6revi listede g\u00f6sterir.<\/p>\nBile\u015fen Mant\u0131\u011f\u0131<\/h3>\n
app.component.ts<\/code>), s\u00fcr\u00fckle ve b\u0131rak\u0131lacak \u00f6\u011feleri i\u00e7eren bir dizi tan\u0131mlaman\u0131z gerekir:<\/p>\n\/\/ src\/app\/app.component.ts\nimport { Component, OnInit } from '@angular\/core';\nimport { DragulaService } from 'ng2-dragula';\n\n@Component({\n selector: 'app-root',\n templateUrl: '.\/app.component.html',\n styleUrls: ['.\/app.component.scss']\n})\nexport class AppComponent implements OnInit {\n title = 'my-drag-drop-app';\n tasks: string[] = ['G\u00fcne\u015flen', 'Kitap oku', 'Kod yaz', 'Yemek yap', 'Spor yap'];\n\n constructor(private dragulaService: DragulaService) {\n \/\/ S\u00fcr\u00fckle ve b\u0131rak olaylar\u0131n\u0131 dinlemek i\u00e7in \u00f6rnek bir kullan\u0131m\n this.dragulaService.drag('my-bag').subscribe(({ el }) => {\n console.log('\u00d6\u011fe s\u00fcr\u00fckleniyor:', el);\n });\n\n this.dragulaService.drop('my-bag').subscribe(({ el, target, source, sibling }) => {\n console.log('\u00d6\u011fe b\u0131rak\u0131ld\u0131:', el);\n console.log('Yeni liste:', this.tasks); \/\/ Veri modeli otomatik g\u00fcncellenir\n });\n }\n\n ngOnInit(): void {\n \/\/ Bile\u015fen y\u00fcklendi\u011finde yap\u0131lacaklar\n }\n}<\/code><\/pre>\ntasks<\/code> ad\u0131nda bir string dizisi tan\u0131mlad\u0131k. DragulaService<\/code>‘i constructor’da enjekte ederek, s\u00fcr\u00fckleme (drag<\/code>) ve b\u0131rakma (drop<\/code>) gibi olaylar\u0131 dinleyebiliriz. drop<\/code> olay\u0131ndan sonra this.tasks<\/code> dizisinin g\u00fcncellendi\u011fini konsolda g\u00f6rebilirsiniz.<\/p>\nMinimal CSS<\/h3>\n
\/ src\/app\/app.component.scss <\/em>\/\n.container {\n max-width: 600px;\n margin: 50px auto;\n padding: 20px;\n border: 1px solid #eee;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n border-radius: 8px;\n background-color: #fff;\n}\n\nh2 {\n text-align: center;\n color: #333;\n margin-bottom: 25px;\n}\n\n.task-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.task-item {\n background-color: #f9f9f9;\n border: 1px solid #ddd;\n padding: 15px 20px;\n margin-bottom: 8px;\n border-radius: 5px;\n cursor: grab; \/ S\u00fcr\u00fckleyebilece\u011fini belirtmek i\u00e7in <\/em>\/\n transition: background-color 0.2s ease;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n &:hover {\n background-color: #f0f0f0;\n }\n}\n\n\/ S\u00fcr\u00fcklenen \u00f6\u011fe i\u00e7in Dragula'n\u0131n sa\u011flad\u0131\u011f\u0131 \u00f6zel s\u0131n\u0131flar <\/em>\/\n.gu-mirror { \/ S\u00fcr\u00fcklenen \u00f6\u011fenin \"ayna\" kopyas\u0131 <\/em>\/\n opacity: 0.8;\n background-color: #e0f2f7; \/ Hafif mavi arka plan <\/em>\/\n border: 1px dashed #007bff;\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n border-radius: 5px;\n padding: 15px 20px;\n cursor: grabbing;\n}\n\n.gu-transit { \/ S\u00fcr\u00fcklenen \u00f6\u011fenin orijinal yeri bo\u015fkenki hali <\/em>\/\n opacity: 0;\n}\n\n.gu-hide { \/ S\u00fcr\u00fcklenen \u00f6\u011fenin orijinali gizlenir <\/em>\/\n display: none !important;\n}\n\n\/ B\u0131rakma alan\u0131 \u00fczerine gelindi\u011finde <\/em>\/\n.gu-over .task-item {\n background-color: #e6f7ff; \/ Hafif mavi arka plan <\/em>\/\n}<\/code><\/pre>\ntasks<\/code> listesindeki \u00f6\u011feleri s\u00fcr\u00fckleyip b\u0131rakarak s\u0131ralar\u0131n\u0131 de\u011fi\u015ftirebilirsiniz. ng2-dragula<\/code> ve dragulaModel<\/code> sayesinde, arka plandaki tasks<\/code> dizisi otomatik olarak g\u00fcncellenecektir.<\/p>\n\u0130leri D\u00fczey Kullan\u0131m: \u00c7oklu S\u00fcr\u00fckle ve B\u0131rak Kapsay\u0131c\u0131lar\u0131<\/h2>\n
ng2-dragula<\/code>, ayn\u0131 “bag” (\u00e7anta\/grup) ad\u0131na sahip birden fazla kapsay\u0131c\u0131 tan\u0131mlayarak bu senaryoyu kolayca y\u00f6netmenizi sa\u011flar.<\/p>\n\u00d6\u011feleri Gruplama<\/h3>\n
[dragula]<\/code> grup ad\u0131n\u0131 vermeniz yeterlidir.<\/p>\n\nYap\u0131lacaklar<\/h3>\n
\n
Devam Edenler<\/h3>\n
\n
Tamamlananlar<\/h3>\n
\n
ul<\/code> elementi var, her biri task-board<\/code> ad\u0131nda ayn\u0131 [dragula]<\/code> grubuna ait. Bu sayede, bir ul<\/code>‘den di\u011ferine \u00f6\u011fe s\u00fcr\u00fckleyip b\u0131rakmak m\u00fcmk\u00fcn olacak. Ayr\u0131ca, tasks<\/code> dizisi yerine task<\/code> nesneleri kullan\u0131yoruz, bu da ger\u00e7ek d\u00fcnya senaryolar\u0131na daha uygun.<\/p>\nBile\u015fen Mant\u0131\u011f\u0131<\/h3>\n
\/\/ src\/app\/app.component.ts\nimport { Component, OnInit, OnDestroy } from '@angular\/core';\nimport { DragulaService } from 'ng2-dragula';\nimport { Subscription } from 'rxjs';\n\ninterface Task {\n id: number;\n name: string;\n status: 'todo' | 'in-progress' | 'done';\n}\n\n@Component({\n selector: 'app-root',\n templateUrl: '.\/app.component.html',\n styleUrls: ['.\/app.component.scss']\n})\nexport class AppComponent implements OnInit, OnDestroy {\n title = 'my-drag-drop-app';\n todoTasks: Task[] = [\n { id: 1, name: 'Proje dok\u00fcmantasyonunu haz\u0131rla', status: 'todo' },\n { id: 2, name: 'API entegrasyonunu tamamla', status: 'todo' }\n ];\n inProgressTasks: Task[] = [\n { id: 3, name: 'Kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc tasarla', status: 'in-progress' }\n ];\n doneTasks: Task[] = [\n { id: 4, name: 'Veritaban\u0131 \u015femas\u0131n\u0131 olu\u015ftur', status: 'done' }\n ];\n\n private subs = new Subscription(); \/\/ Abonelikleri y\u00f6netmek i\u00e7in\n\n constructor(private dragulaService: DragulaService) {\n this.subs.add(this.dragulaService.dropModel('task-board').subscribe(({ el, target, source, sourceModel, targetModel, item }) => {\n console.log('\u00d6\u011fe b\u0131rak\u0131ld\u0131 ve model g\u00fcncellendi:', item);\n console.log('Kaynak Model:', sourceModel);\n console.log('Hedef Model:', targetModel);\n\n \/\/ Bu noktada, veritaban\u0131 veya API'nizi g\u00fcncellemek i\u00e7in gerekli mant\u0131\u011f\u0131 yazabilirsiniz.\n \/\/ \u00d6rne\u011fin, item.status'u g\u00fcncelleyip bir API \u00e7a\u011fr\u0131s\u0131 yapabilirsiniz.\n if (target.classList.contains('todo-list')) { \/\/ \u00d6rnek bir kontrol\n item.status = 'todo';\n } else if (target.classList.contains('in-progress-list')) {\n item.status = 'in-progress';\n } else if (target.classList.contains('done-list')) {\n item.status = 'done';\n }\n console.log('G\u00fcncellenmi\u015f \u00f6\u011fe:', item);\n }));\n\n this.subs.add(this.dragulaService.removeModel('task-board').subscribe(({ el, source, sourceModel, item }) => {\n console.log('\u00d6\u011fe kaynaktan kald\u0131r\u0131ld\u0131:', item);\n \/\/ \u00d6\u011fenin kald\u0131r\u0131ld\u0131\u011f\u0131 durumu y\u00f6netebilirsiniz (\u00f6rne\u011fin, bir \u00e7\u00f6p kutusuna s\u00fcr\u00fckleme).\n }));\n }\n\n ngOnInit(): void {\n \/\/ Bile\u015fen y\u00fcklendi\u011finde yap\u0131lacaklar\n }\n\n ngOnDestroy(): void {\n this.subs.unsubscribe(); \/\/ Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in abonelikleri iptal et\n }\n}<\/code><\/pre>\nTask<\/code> aray\u00fcz\u00fc ile daha karma\u015f\u0131k bir veri yap\u0131s\u0131 kulland\u0131k. dragulaService.dropModel<\/code> olay\u0131n\u0131 dinleyerek, bir \u00f6\u011fe b\u0131rak\u0131ld\u0131\u011f\u0131nda hem kaynak hem de hedef veri modellerine eri\u015febiliriz. item<\/code> parametresi, ta\u015f\u0131nan \u00f6\u011fenin kendisini i\u00e7erir. Bu sayede, \u00f6\u011fenin durumunu (\u00f6rne\u011fin status<\/code> \u00f6zelli\u011fini) g\u00fcncelleyebilir ve bu de\u011fi\u015fikli\u011fi bir arka u\u00e7 servisine bildirebilirsiniz. ngOnDestroy<\/code> i\u00e7inde abonelikleri temizlemek, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in iyi bir pratiktir.<\/p>\nCSS D\u00fczenlemesi<\/h3>\n
\/ src\/app\/app.component.scss <\/em>\/\n.board-container {\n display: flex;\n justify-content: space-around;\n margin: 50px auto;\n max-width: 1200px;\n gap: 20px; \/ S\u00fctunlar aras\u0131 bo\u015fluk <\/em>\/\n}\n\n.board-column {\n flex: 1;\n min-width: 300px;\n background-color: #f8f9fa;\n border: 1px solid #e9ecef;\n border-radius: 8px;\n padding: 15px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.05);\n\n h3 {\n text-align: center;\n color: #495057;\n margin-bottom: 20px;\n padding-bottom: 10px;\n border-bottom: 1px solid #dee2e6;\n }\n}\n\n.task-list {\n list-style: none;\n padding: 0;\n min-height: 100px; \/ Bo\u015fken bile b\u0131rakma alan\u0131 olmas\u0131 i\u00e7in <\/em>\/\n margin: 0;\n}\n\n.task-item {\n background-color: #ffffff;\n border: 1px solid #ced4da;\n padding: 12px 15px;\n margin-bottom: 10px;\n border-radius: 6px;\n cursor: grab;\n transition: all 0.2s ease-in-out;\n box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n\n &:hover {\n background-color: #e9ecef;\n box-shadow: 0 2px 6px rgba(0,0,0,0.1);\n }\n}\n\n\/ Dragula'n\u0131n \u00f6zel s\u0131n\u0131flar\u0131 <\/em>\/\n.gu-mirror {\n opacity: 0.8;\n background-color: #d1ecf1; \/ Hafif mavi <\/em>\/\n border: 1px dashed #007bff;\n box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n transform: rotate(2deg); \/ Hafif bir rotasyon efekti <\/em>\/\n}\n\n.gu-transit {\n opacity: 0;\n}\n\n.gu-hide {\n display: none !important;\n}\n\n.gu-unselectable {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.gu-over .task-list { \/ B\u0131rakma alan\u0131 \u00fczerine gelindi\u011finde <\/em>\/\n background-color: #e2f0ff; \/ Daha belirgin bir mavi <\/em>\/\n border-color: #007bff;\n}<\/code><\/pre>\ndragulaModel<\/code> sayesinde, arka plandaki veri dizileri de otomatik olarak g\u00fcncellenir.<\/p>\nS\u00fcr\u00fckle ve B\u0131rak Davran\u0131\u015f\u0131n\u0131 \u00d6zelle\u015ftirme<\/h2>\n
ng2-dragula<\/code>, s\u00fcr\u00fckle ve b\u0131rak davran\u0131\u015f\u0131n\u0131 ihtiya\u00e7lar\u0131n\u0131za g\u00f6re ayarlaman\u0131z i\u00e7in zengin bir API sunar. Bu \u00f6zelle\u015ftirmeler genellikle iki ana yolla yap\u0131l\u0131r: DragulaService<\/code> olaylar\u0131n\u0131 dinleyerek ve grup se\u00e7eneklerini (options<\/code>) ayarlayarak.<\/p>\nDragulaService Olaylar\u0131<\/h3>\n
DragulaService<\/code>, s\u00fcr\u00fckle ve b\u0131rak ya\u015fam d\u00f6ng\u00fcs\u00fcndeki \u00e7e\u015fitli noktalarda tetiklenen bir dizi olay sa\u011flar. Bu olaylara abone olarak, uygulaman\u0131z\u0131n belirli durumlarda \u00f6zel mant\u0131k y\u00fcr\u00fctmesini sa\u011flayabilirsiniz. En yayg\u0131n olaylar \u015funlard\u0131r:<\/p>\ndrag(bagName)<\/code>:<\/strong> Bir \u00f6\u011fe s\u00fcr\u00fcklenmeye ba\u015flad\u0131\u011f\u0131nda tetiklenir.
\n* drop(bagName)<\/code>:<\/strong> Bir \u00f6\u011fe ge\u00e7erli bir b\u0131rakma alan\u0131na b\u0131rak\u0131ld\u0131\u011f\u0131nda tetiklenir.
\n* over(bagName)<\/code>:<\/strong> S\u00fcr\u00fcklenen \u00f6\u011fe bir kapsay\u0131c\u0131n\u0131n \u00fczerine geldi\u011finde tetiklenir.
\n* out(bagName)<\/code>:<\/strong> S\u00fcr\u00fcklenen \u00f6\u011fe bir kapsay\u0131c\u0131dan \u00e7\u0131kt\u0131\u011f\u0131nda tetiklenir.
\n* remove(bagName)<\/code>:<\/strong> Bir \u00f6\u011fe bir kapsay\u0131c\u0131dan \u00e7\u0131kar\u0131ld\u0131\u011f\u0131nda (\u00f6rne\u011fin removeOnSpill<\/code> true ise) tetiklenir.
\n* cancel(bagName)<\/code>:<\/strong> S\u00fcr\u00fckleme i\u015flemi iptal edildi\u011finde (\u00f6rne\u011fin ge\u00e7ersiz bir alana b\u0131rak\u0131ld\u0131\u011f\u0131nda) tetiklenir.
\n* cloned(bagName)<\/code>:<\/strong> S\u00fcr\u00fcklenen \u00f6\u011fenin kopyas\u0131 olu\u015fturuldu\u011funda tetiklenir (yaln\u0131zca copy<\/code> se\u00e7ene\u011fi true ise).
\n* shadow(bagName)<\/code>:<\/strong> S\u00fcr\u00fcklenen \u00f6\u011fenin g\u00f6lge (yer tutucu) \u00f6\u011fesi ta\u015f\u0131nd\u0131\u011f\u0131nda tetiklenir.
\n* dropModel(bagName)<\/code>:<\/strong> [(dragulaModel)]<\/code> kullan\u0131l\u0131yorsa, \u00f6\u011fe b\u0131rak\u0131ld\u0131\u011f\u0131nda ve model g\u00fcncellendi\u011finde tetiklenir. Bu, genellikle model g\u00fcncellemelerini yakalamak i\u00e7in en kullan\u0131\u015fl\u0131 olayd\u0131r.
\n* removeModel(bagName)<\/code>:<\/strong> [(dragulaModel)]<\/code> kullan\u0131l\u0131yorsa, \u00f6\u011fe modelden kald\u0131r\u0131ld\u0131\u011f\u0131nda tetiklenir.<\/p>\nDragulaService<\/code> \u00fczerinden abone olabilirsiniz:<\/p>\n\/\/ app.component.ts i\u00e7inde\nimport { DragulaService } from 'ng2-dragula';\nimport { Subscription } from 'rxjs';\n\n\/\/ ... (di\u011fer importlar)\n\nexport class AppComponent implements OnInit, OnDestroy {\n \/\/ ... (di\u011fer \u00f6zellikler)\n private subs = new Subscription();\n\n constructor(private dragulaService: DragulaService) {\n \/\/ Drop olay\u0131n\u0131 dinleme\n this.subs.add(this.dragulaService.drop('task-board').subscribe(({ el, target, source, sibling }) => {\n console.log('Drop event: Bir \u00f6\u011fe b\u0131rak\u0131ld\u0131.');\n \/\/ el: B\u0131rak\u0131lan HTML elementi\n \/\/ target: \u00d6\u011fenin b\u0131rak\u0131ld\u0131\u011f\u0131 kapsay\u0131c\u0131 HTML elementi\n \/\/ source: \u00d6\u011fenin geldi\u011fi kapsay\u0131c\u0131 HTML elementi\n \/\/ sibling: \u00d6\u011fenin b\u0131rak\u0131ld\u0131\u011f\u0131 yerdeki kom\u015fu HTML elementi (varsa)\n }));\n\n \/\/ dropModel olay\u0131n\u0131 dinleme (veri modelini g\u00fcncellemek i\u00e7in daha uygun)\n this.subs.add(this.dragulaService.dropModel('task-board').subscribe(({ el, target, source, sourceModel, targetModel, item }) => {\n console.log('dropModel event: Veri modeli g\u00fcncellendi.');\n console.log('Ta\u015f\u0131nan \u00f6\u011fe:', item);\n \/\/ item: Ta\u015f\u0131nan \u00f6\u011fenin kendisi (veri modelindeki nesne)\n \/\/ sourceModel: Kaynak liste (dizi)\n \/\/ targetModel: Hedef liste (dizi)\n\n \/\/ \u00d6rnek: \u00d6\u011fenin durumunu g\u00fcncelle ve bir API \u00e7a\u011fr\u0131s\u0131 yap\n if (target.id === 'todo-list') {\n item.status = 'todo';\n } else if (target.id === 'in-progress-list') {\n item.status = 'in-progress';\n } else if (target.id === 'done-list') {\n item.status = 'done';\n }\n \/\/ this.taskService.updateTask(item).subscribe(); \/\/ Ger\u00e7ek bir senaryoda bu \u015fekilde kullan\u0131labilir\n }));\n\n \/\/ drag olay\u0131n\u0131 dinleme\n this.subs.add(this.dragulaService.drag('task-board').subscribe(({ el, source }) => {\n console.log('Drag event: Bir \u00f6\u011fe s\u00fcr\u00fckleniyor.');\n \/\/ el: S\u00fcr\u00fcklenen HTML elementi\n \/\/ source: \u00d6\u011fenin geldi\u011fi kapsay\u0131c\u0131 HTML elementi\n \/\/ S\u00fcr\u00fckleme ba\u015flad\u0131\u011f\u0131nda g\u00f6rsel bir ipucu vermek i\u00e7in kullan\u0131labilir\n el.classList.add('is-dragging');\n }));\n\n this.subs.add(this.dragulaService.cancel('task-board').subscribe(({ el, container, source }) => {\n console.log('Cancel event: S\u00fcr\u00fckleme iptal edildi.');\n el.classList.remove('is-dragging');\n }));\n\n this.subs.add(this.dragulaService.over('task-board').subscribe(({ el, container, source }) => {\n console.log('Over event: Bir kapsay\u0131c\u0131 \u00fczerine gelindi.');\n container.classList.add('gu-over-highlight');\n }));\n\n this.subs.add(this.dragulaService.out('task-board').subscribe(({ el, container, source }) => {\n console.log('Out event: Bir kapsay\u0131c\u0131dan \u00e7\u0131k\u0131ld\u0131.');\n container.classList.remove('gu-over-highlight');\n }));\n }\n\n ngOnDestroy(): void {\n this.subs.unsubscribe(); \/\/ Abonelikleri temizle\n }\n}<\/code><\/pre>\nDragula Se\u00e7enekleri (Options)<\/h3>\n
ng2-dragula<\/code>, dragula<\/code> k\u00fct\u00fcphanesinin temel se\u00e7eneklerini destekler. Bu se\u00e7enekleri kullanarak s\u00fcr\u00fckle ve b\u0131rak davran\u0131\u015f\u0131n\u0131 daha ayr\u0131nt\u0131l\u0131 bir \u015fekilde kontrol edebilirsiniz. Se\u00e7enekleri, DragulaService.createGroup()<\/code> metodunu kullanarak tan\u0131mlars\u0131n\u0131z:<\/p>\n\/\/ app.component.ts i\u00e7inde, constructor'da veya ngOnInit'te\nimport { DragulaService } from 'ng2-dragula';\n\nexport class AppComponent implements OnInit {\n \/\/ ...\n\n constructor(private dragulaService: DragulaService) {\n this.dragulaService.createGroup('my-custom-bag', {\n \/\/ Se\u00e7enekleri burada tan\u0131mlay\u0131n\n moves: (el, source, handle, sibling) => {\n \/\/ el: S\u00fcr\u00fcklenen element\n \/\/ source: Kaynak kapsay\u0131c\u0131\n \/\/ handle: S\u00fcr\u00fcklemeyi ba\u015flatan element\n \/\/ sibling: S\u00fcr\u00fcklenen elementin kom\u015fusu\n \/\/ Sadece belirli bir s\u0131n\u0131fa sahip \u00f6\u011felerin s\u00fcr\u00fcklenmesine izin ver\n return handle.classList.contains('draggable-item');\n },\n accepts: (el, target, source, sibling) => {\n \/\/ el: S\u00fcr\u00fcklenen element\n \/\/ target: Hedef kapsay\u0131c\u0131\n \/\/ source: Kaynak kapsay\u0131c\u0131\n \/\/ sibling: Hedefteki kom\u015fu element\n \/\/ Sadece 'todo' listesinden 'in-progress' listesine s\u00fcr\u00fcklemeye izin ver\n return source.id === 'todo-list' && target.id === 'in-progress-list';\n },\n copy: false, \/\/ \u00d6\u011feyi s\u00fcr\u00fcklerken kopyala (true) veya ta\u015f\u0131 (false)\n revertOnSpill: true, \/\/ Ge\u00e7ersiz bir alana b\u0131rak\u0131ld\u0131\u011f\u0131nda \u00f6\u011feyi geri yerine koy\n removeOnSpill: false, \/\/ Ge\u00e7ersiz bir alana b\u0131rak\u0131ld\u0131\u011f\u0131nda \u00f6\u011feyi tamamen kald\u0131r\n direction: 'vertical', \/\/ S\u00fcr\u00fckleme y\u00f6n\u00fc: 'horizontal' veya 'vertical'\n mirrorContainer: document.body, \/\/ S\u00fcr\u00fcklenen \u00f6\u011fenin kopyas\u0131n\u0131n eklenece\u011fi kapsay\u0131c\u0131\n ignoreInputTextSelection: true \/\/ Metin giri\u015f alanlar\u0131ndaki se\u00e7imi yok say\n });\n\n \/\/ ... (di\u011fer olay abonelikleri)\n }\n\n ngOnInit(): void {\n \/\/ HTML'de bu grubu kullanmak i\u00e7in:\n \/\/ ...<\/ul>\n }\n}<\/code><\/pre>\n
moves(el, source, handle, sibling)<\/code> (function):<\/strong> Bir \u00f6\u011fenin s\u00fcr\u00fcklenip s\u00fcr\u00fcklenemeyece\u011fini belirler. true<\/code> d\u00f6nerse s\u00fcr\u00fcklemeye izin verilir, false<\/code> d\u00f6nerse engellenir. Bu fonksiyon, belirli \u00f6\u011feleri s\u00fcr\u00fcklenemez yapmak veya sadece belirli bir “handle” (tutacak) \u00fczerinden s\u00fcr\u00fcklemeye izin vermek i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.
\n* accepts(el, target, source, sibling)<\/code> (function):<\/strong> Bir \u00f6\u011fenin belirli bir hedef kapsay\u0131c\u0131ya b\u0131rak\u0131l\u0131p b\u0131rak\u0131lamayaca\u011f\u0131n\u0131 belirler. true<\/code> d\u00f6nerse b\u0131rakmaya izin verilir. Bu, kurall\u0131 b\u0131rakma alanlar\u0131 olu\u015fturmak i\u00e7in harikad\u0131r (\u00f6rne\u011fin, “Tamamland\u0131” s\u00fctununa sadece “Devam Ediyor” \u00f6\u011felerinin b\u0131rak\u0131lmas\u0131na izin vermek).
\n* copy<\/code> (boolean):<\/strong> true<\/code> olarak ayarlan\u0131rsa, s\u00fcr\u00fcklenen \u00f6\u011fe kopyalan\u0131r ve orijinali yerinde kal\u0131r. false<\/code> ise \u00f6\u011fe ta\u015f\u0131n\u0131r.
\n* revertOnSpill<\/code> (boolean):<\/strong> true<\/code> ise, bir \u00f6\u011fe ge\u00e7erli bir b\u0131rakma alan\u0131 d\u0131\u015f\u0131na b\u0131rak\u0131ld\u0131\u011f\u0131nda orijinal konumuna geri d\u00f6ner.
\n* removeOnSpill<\/code> (boolean):<\/strong> true<\/code> ise, bir \u00f6\u011fe ge\u00e7erli bir b\u0131rakma alan\u0131 d\u0131\u015f\u0131na b\u0131rak\u0131ld\u0131\u011f\u0131nda tamamen kald\u0131r\u0131l\u0131r. Bu, bir \u00e7\u00f6p kutusu i\u015flevi olu\u015fturmak i\u00e7in kullan\u0131labilir.
\n* direction<\/code> (string):<\/strong> S\u00fcr\u00fckleme y\u00f6n\u00fcn\u00fc belirler: 'vertical'<\/code> (varsay\u0131lan) veya 'horizontal'<\/code>.
\n* mirrorContainer<\/code> (HTMLElement):<\/strong> S\u00fcr\u00fcklenen \u00f6\u011fenin “ayna” kopyas\u0131n\u0131n eklenece\u011fi DOM elementi. Varsay\u0131lan olarak document.body<\/code>‘dir.
\n* ignoreInputTextSelection<\/code> (boolean):<\/strong> true<\/code> ise, metin giri\u015f alanlar\u0131ndaki (input, textarea) metin se\u00e7imi s\u00fcr\u00fckleme i\u015flemini ba\u015flatmaz.<\/p>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131 ve En \u0130yi Uygulamalar<\/h2>\n
ng2-dragula<\/code>‘y\u0131 ger\u00e7ek d\u00fcnya Angular uygulamalar\u0131na entegre ederken g\u00f6z \u00f6n\u00fcnde bulundurman\u0131z gereken baz\u0131 \u00f6nemli noktalar ve en iyi uygulamalar vard\u0131r.<\/p>\nDurumu Kaydetme (Persisting State)<\/h3>\n
dragulaService.dropModel()<\/code> olay\u0131, bu i\u015flem i\u00e7in ideal bir yerdir. Bu olay tetiklendi\u011finde, targetModel<\/code> ve item<\/code> gibi parametrelere eri\u015ferek de\u011fi\u015fen veriyi alabilir ve bir HTTP iste\u011fi ile API’nize g\u00f6nderebilirsiniz:<\/p>\n\/\/ app.component.ts i\u00e7inde dropModel aboneli\u011fi\nthis.subs.add(this.dragulaService.dropModel('task-board').subscribe(({ el, target, source, sourceModel, targetModel, item }) => {\n console.log('\u00d6\u011fe b\u0131rak\u0131ld\u0131 ve model g\u00fcncellendi:', item);\n\n \/\/ \u00d6\u011fenin yeni konumuna g\u00f6re durumunu g\u00fcncelle\n if (target.id === 'todo-list') {\n item.status = 'todo';\n } else if (target.id === 'in-progress-list') {\n item.status = 'in-progress';\n } else if (target.id === 'done-list') {\n item.status = 'done';\n }\n\n \/\/ API'ye g\u00fcncelleme iste\u011fi g\u00f6nder\n \/\/ this.taskService.updateTask(item.id, { status: item.status, order: targetModel.indexOf(item) })\n \/\/ .subscribe(\n \/\/ response => console.log('G\u00f6rev g\u00fcncellendi:', response),\n \/\/ error => console.error('G\u00fcncelleme hatas\u0131:', error)\n \/\/ );\n\n \/\/ Ayr\u0131ca, targetModel'in yeni s\u0131ralamas\u0131n\u0131 da kaydetmek isteyebilirsiniz.\n \/\/ targetModel.forEach((task, index) => {\n \/\/ this.taskService.updateTask(task.id, { order: index }).subscribe();\n \/\/ });\n}));<\/code><\/pre>\nKarma\u015f\u0131k Veri Yap\u0131lar\u0131<\/h3>\n
Task<\/code> aray\u00fcz\u00fc ile basit objeler kulland\u0131k. Ger\u00e7ek uygulamalarda, \u00f6\u011feleriniz daha karma\u015f\u0131k i\u00e7 i\u00e7e ge\u00e7mi\u015f objeler i\u00e7erebilir. ng2-dragula<\/code>, [(dragulaModel)]<\/code> direktifi sayesinde bu t\u00fcr karma\u015f\u0131k veri yap\u0131lar\u0131yla da sorunsuz \u00e7al\u0131\u015f\u0131r. dropModel<\/code> olay\u0131, ta\u015f\u0131nan \u00f6\u011fenin t\u00fcm orijinal \u00f6zelliklerini i\u00e7eren item<\/code> parametresini sa\u011flar.<\/p>\nEri\u015filebilirlik (Accessibility)<\/h3>\n
ng2-dragula<\/code> varsay\u0131lan olarak klavye eri\u015filebilirli\u011fi sa\u011flamaz. Eri\u015filebilir bir s\u00fcr\u00fckle ve b\u0131rak deneyimi sunmak i\u00e7in ek \u00e7aba sarf etmeniz gerekebilir:<\/p>\n
\n* ARIA Nitelikleri:<\/strong> \u00d6\u011felere ve kapsay\u0131c\u0131lara aria-grabbed<\/code>,