{"id":28221,"date":"2019-10-02T00:00:06","date_gmt":"2019-10-01T22:00:06","guid":{"rendered":"https:\/\/blexin.com\/?p=28221"},"modified":"2021-01-13T09:40:27","modified_gmt":"2021-01-13T08:40:27","slug":"gestire-il-drag-drop-in-angular","status":"publish","type":"post","link":"https:\/\/blexin.com\/it\/blog\/gestire-il-drag-drop-in-angular\/","title":{"rendered":"Gestire il Drag & Drop in Angular"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

\u00c8 possibile in un\u2019applicazione web visualizzare dati in forma tabellare dando la possibilit\u00e0 all\u2019utente di spostare le colonne mediante\u00a0drag and drop<\/strong>? In quest\u2019articolo\u00a0vi racconter\u00f2 la mia esperienza al riguardo, in un progetto Angular.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Partiamo dalle basi usando il classico tag HTML <table>:<\/p>\n\n\n

\n<table class="table" >\n\u00a0\u00a0\u00a0<thead class="thead-dark" >\n\u00a0\u00a0\u00a0\u00a0\u00a0<tr >\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th *ngFor="let column of columns" >\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{column}}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/th >\n\u00a0\u00a0\u00a0\u00a0\u00a0<\/tr >\n\u00a0\u00a0\u00a0<\/thead >\n\u00a0\u00a0\u00a0<tbody >\n\u00a0\u00a0\u00a0\u00a0\u00a0<tr *ngFor="let row of rows" >\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td *ngFor="let column of columns" >\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{row[column]}}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/td >\n\u00a0\u00a0\u00a0\u00a0\u00a0<\/tr >\n\u00a0\u00a0\u00a0<\/tbody >\n<\/table >\n<\/pre><\/div>\n\n\n
columns<\/strong> \u00e8 un array di stringhe per impostare gli header delle colonne mentre rows<\/strong> \u00e8 un array di oggetti.
I dati ci sono, ma ovviamente manca ancora la possibilit\u00e0 di poter spostare le colonne.<\/p>\n\n\n\n
Dragula<\/h2>\n\n\n\n
Una libreria che permette di aggiungere questa funzionalit\u00e0 con poche modifiche al codice \u00e8 ng2-dragula<\/strong> che \u00e8 il wrapper ufficiale della libreria open source dragula.
Di seguito il link alla pagina su github:<\/p>\n\n\n\n
https:\/\/github.com\/valor-software\/ng2-dragula<\/a><\/p>\n\n\n\n
Occorre innanzitutto aggiungerla mediante il comando:<\/p>\n\n\n
\nnpm install ng2-dragula\n<\/pre><\/div>\n\n\n
ed in seguito aggiungere qualche riga di configurazione per poterla utilizzare.<\/p>\n\n\n\n
  1. Aggiungere\u00a0(window as any).global = window;\u00a0al\u00a0polyfills.ts<\/strong>, file che permette ad Angular di mantenere la compatibilit\u00e0 con i differenti browser;<\/li>
  2. Aggiungere\u00a0DragulaModule.forRoot()<\/strong>\u00a0nelle\u00a0imports<\/em>\u00a0del\u00a0app.module.ts;<\/strong><\/li>
  3. Aggiungere nel proprio file .css (es : style.css ) le seguenti regole di stile:<\/li>
  4. <\/li><\/ol>\n\n\n
    \n\/* in-flight clone *\/\n.gu-mirror {\n\u00a0\u00a0position: fixed !important;\n\u00a0\u00a0margin: 0 !important;\n\u00a0\u00a0z-index: 9999 !important;\n\u00a0\u00a0opacity: 0.8;\n\u00a0\u00a0-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";\n\u00a0\u00a0filter: alpha(opacity=80);\n\u00a0\u00a0pointer-events: none;\n}\n\/* high-performance display:none; helper *\/\n.gu-hide {\n\u00a0\u00a0left: -9999px !important;\n}\n\/* added to mirrorContainer (default = body) while dragging *\/\n.gu-unselectable {\n\u00a0\u00a0-webkit-user-select: none !important;\n\u00a0\u00a0-moz-user-select: none !important;\n\u00a0\u00a0-ms-user-select: none !important;\n\u00a0\u00a0user-select: none !important;\n}\n\/* added to the source element while its mirror is dragged *\/\n.gu-transit {\n\u00a0\u00a0opacity: 0.2;\n\u00a0\u00a0-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";\n\u00a0\u00a0filter: alpha(opacity=20);\n}\n<\/pre><\/div>\n\n\n
    La libreria offre la direttiva dragula<\/strong> che, applicata a un contenitore, permette di abilitare il trascinamento per tutti i suoi figli. A tale direttiva \u00e8 possibile passare una stringa che ne determina il nome del gruppo di appartenenza. In questo modo, \u00e8 possibile assegnare lo stesso gruppo a pi\u00f9 contenitori abilitando di fatto il trascinamento di un elemento tra i contenitori appartenenti allo stesso gruppo.<\/p>\n\n\n\n
    Per salvare i cambiamenti effettuati dal trascinamento \u00e8 possibile utilizzare il two-way binding con\u00a0[(dragulaModel)]=”…”\u00a0oppure sottoscriversi a DragulaService\u00a0dropModel.
    Ho scelto di utilizzare il primo metodo non dovendo effettuare ulteriori operazioni sui dati.<\/p>\n\n\n
    \n<table class="table" >\n\u00a0<thead class="thead-dark" >\n\u00a0\u00a0\u00a0<tr dragula="table_columns" [(dragulaModel)]="columns" >\n\u00a0\u00a0\u00a0\u00a0\u00a0<th *ngFor="let column of columns" >\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{column}}\n\u00a0\u00a0\u00a0\u00a0\u00a0<\/th >\n\u00a0\u00a0\u00a0<\/tr >\n\u00a0<\/thead >\n\u00a0<tbody >\n\u00a0\u00a0\u00a0<tr *ngFor="let row of rows" >\n\u00a0\u00a0\u00a0\u00a0\u00a0<td *ngFor="let column of columns" >\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{row[column]}}\n\u00a0\u00a0\u00a0\u00a0\u00a0<\/td >\n\u00a0\u00a0\u00a0<\/tr >\n\u00a0<\/tbody >\n<\/table >\n<\/pre><\/div>\n\n\n
    Ora \u00e8 possibile trascinare una colonna e posizionarla prima o dopo un\u2019altra.<\/p>\n\n\n\n
    Quando la tabella ha un numero di colonne tali da richiedere l\u2019inserimento in pagina di una scrollbar, il funzionamento della libreria non \u00e8 quello sperato. Ad esempio, se vogliamo spostare una colonna dalle prime posizioni a una delle ultime, occorre eseguire dei trascinamenti parziali.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Dom-autoscroller<\/h2>\n\n\n\n
    \u00c8 possibile in questo caso farci aiutare da una libreria open source che si occupi di effettuare uno scroll in automatico in base alla posizione del mouse rispetto all\u2019elemento scrollabile.<\/p>\n\n\n\n
    Di seguito il link alla repository pubblica: https:\/\/github.com\/hollowdoor\/dom_autoscroller<\/a><\/p>\n\n\n\n
    Installiamo la libreria nel nostro progetto:<\/p>\n\n\n
    \nnpm install dom-autoscroller\n<\/pre><\/div>\n\n\n
    Per poter abilitare uno o pi\u00f9 elementi allo scroll \u00e8 necessario aggiungere le seguenti righe di codice<\/p>\n\n\n
    \nimport * as autoScroll from 'dom-autoscroller';\n\u00a0\nautoScroll([elem], {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 30,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0maxSpeed: 10,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0scrollWhenOutside: true,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0autoScroll() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return this.down;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n<\/pre><\/div>\n\n\n
    dove elem<\/strong> \u00e8 l\u2019elemento sulla quale vogliamo applicare il nostro scroll automatico.<\/p>\n\n\n\n
    Potremmo, quindi, aggiungere nel ngAfterViewInit del nostro component le seguenti righe di codice:<\/p>\n\n\n
    \nngAfterViewInit(): void {\n\u00a0\u00a0\u00a0\u00a0const elem = Array.from(this.elemRef.nativeElement\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.querySelectorAll('.table-container'));\n\u00a0\n\u00a0\u00a0\u00a0\u00a0autoScroll(elem, {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 30,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0maxSpeed: 10,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0scrollWhenOutside: true,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0autoScroll() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return this.down;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n}\n<\/pre><\/div>\n\n\n
    non prima di aver aggiunto tra i parametri del costruttore<\/p>\n\n\n
    \nprivate elemRef: ElementRef\n<\/pre><\/div>\n\n\n
    che ci permette di ottenere un riferimento al nostro elemento scrollabile.<\/p>\n\n\n\n
    Adesso il funzionamento \u00e8 corretto ma possiamo aumentare la riutilizzabilit\u00e0 del nostro codice creando una direttiva.<\/p>\n\n\n
    \nimport { Directive, OnInit, ElementRef } from '@angular\/core';\nimport * as autoScroll from 'dom-autoscroller';\n\u00a0\n@Directive({ selector: '[appAutoScroll]' })\nexport class AutoScrollDirective implements OnInit {\n\u00a0\u00a0constructor(private elemRef: ElementRef) { }\n\u00a0\n\u00a0\u00a0ngOnInit(): void {\n\u00a0\u00a0\u00a0\u00a0autoScroll([this.elemRef.nativeElement], {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0margin: 30,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0maxSpeed: 10,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0scrollWhenOutside: true,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0autoScroll() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return this.down;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n
    E poi applicarla al contenitore della tabella:<\/p>\n\n\n
    \n<div class="text-center mt-5">\n\u00a0\u00a0<h1>\n\u00a0\u00a0\u00a0\u00a0Welcome to {{ title }}!\n\u00a0\u00a0<\/h1>\n<\/div>\n\u00a0\n<div class="p-5 m-5">\n\u00a0\u00a0<div class="table-responsive table-container" appAutoScroll>\n\u00a0\u00a0\u00a0\u00a0<table class="table">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<thead class="thead-dark">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tr dragula="table_columns" [(dragulaModel)]="columns">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th *ngFor="let column of columns">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{column}}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/thead>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tbody>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tr *ngFor="let row of rows">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td *ngFor="let column of columns">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{{row[column]}}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tbody>\n\u00a0\u00a0\u00a0\u00a0<\/table>\n\u00a0\u00a0<\/div>\n<\/div>\n<\/pre><\/div>\n\n\n
    Tutto il codice, infine, pu\u00f2 essere spostato in un componente riutilizzabile ovunque nel progetto. Ad esso passeremo i dati da visualizzare come input.<\/p>\n\n\n\n
    Il codice della demo \u00e8 disponibile su github al seguente indirizzo:<\/p>\n\n\n\n
    https:\/\/github.com\/AARNOLD87\/AngularDraggableTableWithScrollbar<\/a><\/p>\n\n\n\n
    Alla prossima!<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"
    Vediamo come gestire il classico drag & drop in Angular utilizzando la libreria Dragula e ovviando a qualche sua limitazione<\/p>\n","protected":false},"author":196716250,"featured_media":28222,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_crdt_document":"","inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[688637374],"tags":[688637387],"class_list":["post-28221","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-angular"],"yoast_head":"\nGestire il Drag & Drop in Angular - Blexin<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blexin.com\/it\/blog\/gestire-il-drag-drop-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gestire il Drag & Drop in Angular - Blexin\" \/>\n<meta property=\"og:description\" content=\"Vediamo come gestire il classico drag & drop in Angular utilizzando la libreria Dragula e ovviando a qualche sua limitazione\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/it\/blog\/gestire-il-drag-drop-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-01T22:00:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-13T08:40:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i1.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/dedbb035-3e42-4dc9-bb36-367e364d5ded.png?fit=1024%2C608&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"608\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Adolfo Arnold\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Adolfo Arnold\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/gestire-il-drag-drop-in-angular\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/gestire-il-drag-drop-in-angular\\\/\"},\"author\":{\"name\":\"Adolfo Arnold\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/0de430b61c8a48b0e9d81308817c1517\"},\"headline\":\"Gestire il Drag & Drop in Angular\",\"datePublished\":\"2019-10-01T22:00:06+00:00\",\"dateModified\":\"2021-01-13T08:40:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/gestire-il-drag-drop-in-angular\\\/\"},\"wordCount\":521,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/gestire-il-drag-drop-in-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/dedbb035-3e42-4dc9-bb36-367e364d5ded.png?fit=1024%2C608&ssl=1\",\"keywords\":[\"Angular\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/gestire-il-drag-drop-in-angular\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/gestire-il-drag-drop-in-angular\\\/\",\"name\":\"Gestire il Drag & Drop in Angular - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/gestire-il-drag-drop-in-angular\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/gestire-il-drag-drop-in-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/dedbb035-3e42-4dc9-bb36-367e364d5ded.png?fit=1024%2C608&ssl=1\",\"datePublished\":\"2019-10-01T22:00:06+00:00\",\"dateModified\":\"2021-01-13T08:40:27+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/0de430b61c8a48b0e9d81308817c1517\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/gestire-il-drag-drop-in-angular\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/gestire-il-drag-drop-in-angular\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/gestire-il-drag-drop-in-angular\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/dedbb035-3e42-4dc9-bb36-367e364d5ded.png?fit=1024%2C608&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/dedbb035-3e42-4dc9-bb36-367e364d5ded.png?fit=1024%2C608&ssl=1\",\"width\":1024,\"height\":608},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/gestire-il-drag-drop-in-angular\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gestire il Drag & Drop in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/0de430b61c8a48b0e9d81308817c1517\",\"name\":\"Adolfo Arnold\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g\",\"caption\":\"Adolfo Arnold\"},\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/author\\\/adolfo-arnoldblexin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gestire il Drag & Drop in Angular - Blexin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blexin.com\/it\/blog\/gestire-il-drag-drop-in-angular\/","og_locale":"it_IT","og_type":"article","og_title":"Gestire il Drag & Drop in Angular - Blexin","og_description":"Vediamo come gestire il classico drag & drop in Angular utilizzando la libreria Dragula e ovviando a qualche sua limitazione","og_url":"https:\/\/blexin.com\/it\/blog\/gestire-il-drag-drop-in-angular\/","og_site_name":"Blexin","article_published_time":"2019-10-01T22:00:06+00:00","article_modified_time":"2021-01-13T08:40:27+00:00","og_image":[{"width":1024,"height":608,"url":"https:\/\/i1.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/dedbb035-3e42-4dc9-bb36-367e364d5ded.png?fit=1024%2C608&ssl=1","type":"image\/png"}],"author":"Adolfo Arnold","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Adolfo Arnold","Tempo di lettura stimato":"4 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/it\/blog\/gestire-il-drag-drop-in-angular\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/it\/blog\/gestire-il-drag-drop-in-angular\/"},"author":{"name":"Adolfo Arnold","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/0de430b61c8a48b0e9d81308817c1517"},"headline":"Gestire il Drag & Drop in Angular","datePublished":"2019-10-01T22:00:06+00:00","dateModified":"2021-01-13T08:40:27+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/gestire-il-drag-drop-in-angular\/"},"wordCount":521,"image":{"@id":"https:\/\/blexin.com\/it\/blog\/gestire-il-drag-drop-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/dedbb035-3e42-4dc9-bb36-367e364d5ded.png?fit=1024%2C608&ssl=1","keywords":["Angular"],"articleSection":["Blog"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/it\/blog\/gestire-il-drag-drop-in-angular\/","url":"https:\/\/blexin.com\/it\/blog\/gestire-il-drag-drop-in-angular\/","name":"Gestire il Drag & Drop in Angular - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/gestire-il-drag-drop-in-angular\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/it\/blog\/gestire-il-drag-drop-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/dedbb035-3e42-4dc9-bb36-367e364d5ded.png?fit=1024%2C608&ssl=1","datePublished":"2019-10-01T22:00:06+00:00","dateModified":"2021-01-13T08:40:27+00:00","author":{"@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/0de430b61c8a48b0e9d81308817c1517"},"breadcrumb":{"@id":"https:\/\/blexin.com\/it\/blog\/gestire-il-drag-drop-in-angular\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/it\/blog\/gestire-il-drag-drop-in-angular\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blexin.com\/it\/blog\/gestire-il-drag-drop-in-angular\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/dedbb035-3e42-4dc9-bb36-367e364d5ded.png?fit=1024%2C608&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/dedbb035-3e42-4dc9-bb36-367e364d5ded.png?fit=1024%2C608&ssl=1","width":1024,"height":608},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/it\/blog\/gestire-il-drag-drop-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/it\/"},{"@type":"ListItem","position":2,"name":"Gestire il Drag & Drop in Angular"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/it\/#website","url":"https:\/\/blexin.com\/it\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/0de430b61c8a48b0e9d81308817c1517","name":"Adolfo Arnold","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ff2a87b54d0f130d7452164533199af05ef16dbd08b9241729946cea0eec7cca?s=96&d=identicon&r=g","caption":"Adolfo Arnold"},"url":"https:\/\/blexin.com\/it\/author\/adolfo-arnoldblexin-com\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/dedbb035-3e42-4dc9-bb36-367e364d5ded.png?fit=1024%2C608&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-7lb","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/28221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/users\/196716250"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/comments?post=28221"}],"version-history":[{"count":6,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/28221\/revisions"}],"predecessor-version":[{"id":28236,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/28221\/revisions\/28236"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media\/28222"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media?parent=28221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/categories?post=28221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/tags?post=28221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}