{"id":28237,"date":"2019-10-02T00:00:06","date_gmt":"2019-10-01T22:00:06","guid":{"rendered":"https:\/\/blexin.com\/gestire-il-drag-drop-in-angular\/"},"modified":"2021-05-20T18:52:29","modified_gmt":"2021-05-20T16:52:29","slug":"managing-the-drag-drop-in-angular","status":"publish","type":"post","link":"https:\/\/blexin.com\/en\/blog-en\/managing-the-drag-drop-in-angular\/","title":{"rendered":"Managing the drag & drop in Angular"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Is it possible in a web application to display data in tabular form and allowing the user to move columns with the drag and drop<\/strong>? In this article, I will tell you about my experience in an Angular project.<\/p>\n\n\n\n

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

Let\u2019s start with basics using the HTML tag <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> is a strings array used to set columns\u2019 headers, whereas rows<\/strong> is an object array.
Data are present, but it still lacks the possibility to move columns.<\/p>\n\n\n\n
Dragula<\/h2>\n\n\n\n
There\u2019s a library that allows us to add this functionality with only a few code\u2019s changes: its name is ng2-dragula<\/strong> and it is the official wrapper of the open-source library dragula.
Its page on github is:<\/p>\n\n\n\n
https:\/\/github.com\/valor-software\/ng2-dragula<\/a><\/p>\n\n\n\n
First of all, we have to add it with the command:<\/p>\n\n\n
\nnpm install ng2-dragula\n<\/pre><\/div>\n\n\n
And then add some configuration lines to make it usable.<\/p>\n\n\n\n
  1. add (window as any).global = window; to the polyfills.ts<\/strong>, file which allows Angular to maintain the compatibility with different browsers;<\/li>
  2. Add DragulaModule.forRoot()<\/strong> in the imports<\/em> of app.module.ts;<\/strong><\/li>
  3. add in your .css file (i.e.:style css) the following style\u2019s regulations:<\/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
    The library offers the dragula <\/strong>directive that, when applied to a container, permits to enable the drag and drop of all its sons. It is possible to pass a string to this directive, that defines the name of the group to which they belong. In this way, it is possible to assign the same group to different containers, enabling the drag and drop of an element among containers belonging to the same group.<\/p>\n\n\n\n
    It is possible to save the changes made with the drag and drop using the two-way binding with [(dragulaModel)]=”…” or sign up for DragulaService dropModel. I choose to use the first method since I don\u2019t need to do more operations on data.<\/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
    Now it\u2019s possible to drag a column and put it before or after another one.<\/p>\n\n\n\n
    If we have a table with a number of columns that requires the use of a scrollbar on the page, the functioning of the library is not the expected one. For example, if we want to move a column from the top positions to one of the lasts, we need to make a partial drag and drop<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Dom-autoscroller<\/h2>\n\n\n\n
    It is possible, in that case, to use the help of an open-source library, that will take care to automatically scroll the table, depending on the mouse position relative to the scrollable element.<\/p>\n\n\n\n
    You can find the public repository here: https:\/\/github.com\/hollowdoor\/dom_autoscroller<\/a><\/p>\n\n\n\n
    Now we can install the library in our project:<\/p>\n\n\n
    \nnpm install dom-autoscroller\n<\/pre><\/div>\n\n\n
    It is necessary to add following command lines, to enable one or more elements to the scroll.<\/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
    where elem<\/strong> is the element on which we want to apply the automatic scroll.<\/p>\n\n\n\n
    We can now add the following code lines in the ngAfterViewInit of our component:<\/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
    But first we should add among the builder parameters<\/p>\n\n\n
    \nprivate elemRef: ElementRef\n<\/pre><\/div>\n\n\n
    that allows us to obtain a reference to our scrollable element.<\/p>\n\n\n\n
    Now the functioning is right, but we can intensify the reusability of our code creating a directive:<\/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
    And then apply it to the table container:<\/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
    The whole code can be moved in a component, that can be used in any part of the project: we will pass to it the data to be displaied as input.<\/p>\n\n\n\n
    The code of the demo is available on github at following address:<\/p>\n\n\n\n
    \nhttps:\/\/github.com\/AARNOLD87\/AngularDraggableTableWithScrollbar<\/a>\n<\/div><\/figure>\n\n\n\n
    See you next!<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"
    Let’s see how to manage the classical drag & drop in Angular, using the library Dragula and overcoming some of its limitations<\/p>\n","protected":false},"author":196716250,"featured_media":28223,"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":[688637524],"tags":[688637390],"class_list":["post-28237","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-en","tag-angular-en"],"yoast_head":"\nManaging the 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\/en\/blog-en\/managing-the-drag-drop-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Managing the drag & drop in Angular - Blexin\" \/>\n<meta property=\"og:description\" content=\"Let's see how to manage the classical drag & drop in Angular, using the library Dragula and overcoming some of its limitations\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/en\/blog-en\/managing-the-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-05-20T16:52:29+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=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Adolfo Arnold\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/managing-the-drag-drop-in-angular\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/managing-the-drag-drop-in-angular\\\/\"},\"author\":{\"name\":\"Adolfo Arnold\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/0de430b61c8a48b0e9d81308817c1517\"},\"headline\":\"Managing the drag & drop in Angular\",\"datePublished\":\"2019-10-01T22:00:06+00:00\",\"dateModified\":\"2021-05-20T16:52:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/managing-the-drag-drop-in-angular\\\/\"},\"wordCount\":605,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/managing-the-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\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/managing-the-drag-drop-in-angular\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/managing-the-drag-drop-in-angular\\\/\",\"name\":\"Managing the drag & drop in Angular - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/managing-the-drag-drop-in-angular\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/managing-the-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-05-20T16:52:29+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/0de430b61c8a48b0e9d81308817c1517\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/managing-the-drag-drop-in-angular\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/managing-the-drag-drop-in-angular\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/managing-the-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\\\/en\\\/blog-en\\\/managing-the-drag-drop-in-angular\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Managing the drag & drop in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/0de430b61c8a48b0e9d81308817c1517\",\"name\":\"Adolfo Arnold\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@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\\\/en\\\/author\\\/adolfo-arnoldblexin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Managing the 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\/en\/blog-en\/managing-the-drag-drop-in-angular\/","og_locale":"en_US","og_type":"article","og_title":"Managing the drag & drop in Angular - Blexin","og_description":"Let's see how to manage the classical drag & drop in Angular, using the library Dragula and overcoming some of its limitations","og_url":"https:\/\/blexin.com\/en\/blog-en\/managing-the-drag-drop-in-angular\/","og_site_name":"Blexin","article_published_time":"2019-10-01T22:00:06+00:00","article_modified_time":"2021-05-20T16:52:29+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":{"Written by":"Adolfo Arnold","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/en\/blog-en\/managing-the-drag-drop-in-angular\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/en\/blog-en\/managing-the-drag-drop-in-angular\/"},"author":{"name":"Adolfo Arnold","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/0de430b61c8a48b0e9d81308817c1517"},"headline":"Managing the drag & drop in Angular","datePublished":"2019-10-01T22:00:06+00:00","dateModified":"2021-05-20T16:52:29+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/managing-the-drag-drop-in-angular\/"},"wordCount":605,"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/managing-the-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":"en-US"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/en\/blog-en\/managing-the-drag-drop-in-angular\/","url":"https:\/\/blexin.com\/en\/blog-en\/managing-the-drag-drop-in-angular\/","name":"Managing the drag & drop in Angular - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/managing-the-drag-drop-in-angular\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/managing-the-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-05-20T16:52:29+00:00","author":{"@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/0de430b61c8a48b0e9d81308817c1517"},"breadcrumb":{"@id":"https:\/\/blexin.com\/en\/blog-en\/managing-the-drag-drop-in-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/en\/blog-en\/managing-the-drag-drop-in-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blexin.com\/en\/blog-en\/managing-the-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\/en\/blog-en\/managing-the-drag-drop-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/en\/"},{"@type":"ListItem","position":2,"name":"Managing the drag & drop in Angular"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/en\/#website","url":"https:\/\/blexin.com\/en\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/0de430b61c8a48b0e9d81308817c1517","name":"Adolfo Arnold","image":{"@type":"ImageObject","inLanguage":"en-US","@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\/en\/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-7lr","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/users\/196716250"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/comments?post=28237"}],"version-history":[{"count":5,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28237\/revisions"}],"predecessor-version":[{"id":31970,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28237\/revisions\/31970"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media\/28223"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media?parent=28237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/categories?post=28237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/tags?post=28237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}