Needs update for Angular 11

[Flywheel]

This package has enabled dragging from the site information control in browser's URL bar so that the URL can be read and parsed in code.. Unfortunately, the implementation that worked in Angular 7 fails to compile for production in Angular 11.

In my template, at dndDropzone [dndAllowExternal]="true" Angular 11 now reports Type '""' is not assignable to type 'string[]

Works with Angular 7 https://stackblitz.com/edit/ngx-drag-drop-issue-template-rwlnuh Fails with Angular 11 https://stackblitz.com/edit/angular-11-with-ngx-drag-drop

[markslingerland]

`node_modules/ngx-drag-drop/dnd.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (ngx-drag-drop) which declares DndModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.`

I'm also experiencing some compatibility issues for Angular 11

[rogerfar]

@reppners is this library deprecated? Could someone else take it over to maintain? It's hard to create a fork and create a new similar NPM package.

[reppners]

Day-job and private life make it hard for me to allocate time for open-source but I welcome everyone who wants to participate!

[apoth12]

Is there any workaround to use ngx-drag-drop in a newer angular version (8+)? The module is great and I did not find any similiar one. The only issue is that dndDropzone can't be used.

<div *ngIf="item.children" class="layout-padding" dndDropzone (dndDrop)="onDrop($event, item.children)">...
</div>

Getting the error Type 'string' is not assignable to type 'string[]'. I tried to add the attribute manually with dnddropzone but this does not help here. Can't drop elements into this area.

[syedzahed]

Same issue as @apoth12. Any Help?

[jtomek]

Same issue, using Angular 12

[bubbacorporation]

In order to remove the error you could try to use

[dndDropzone]="[]"

instead of

dndDropzone

Working stackblitz: https://stackblitz.com/edit/angular-ivy-khrgly?

[richie50]

@bubbacorporation thanks mate.

[DTMOS-SIM]

Error

error TS2322: Type 'string' is not assignable to type 'EffectAllowed'.

197              [dndEffectAllowed]="draggable.effectAllowed"

typing.d.ts

export declare type DropEffect = "move" | "copy" | "link" | "none";
export declare type EffectAllowed = DropEffect | "copyMove" | "copyLink" | "linkMove" | "all" | "uninitialized";

Could anyone plz enlighten me as to why this error sufaces when the types is explicitly set to string as seen from the typings file? Help appreciated thanks! (Btw I am setting effectAllowed = "all")

[reppners]

Working on releasing a version for angular v13 where the project itself is refactored to use angular cli capabilities for libraries.

[reppners]

Error

error TS2322: Type 'string' is not assignable to type 'EffectAllowed'.

197              [dndEffectAllowed]="draggable.effectAllowed"

typing.d.ts

export declare type DropEffect = "move" | "copy" | "link" | "none";
export declare type EffectAllowed = DropEffect | "copyMove" | "copyLink" | "linkMove" | "all" | "uninitialized";

Could anyone plz enlighten me as to why this error sufaces when the types is explicitly set to string as seen from the typings file? Help appreciated thanks! (Btw I am setting effectAllowed = "all")

Type your variable with EffectAllowed, e.g. myEffectAllowed: EffectAllowed = "all".

@DTMOS-SIM cc

[reppners]

re-scaffolded with angular v13 https://www.npmjs.com/package/ngx-drag-drop/v/next

[Supriya-bansal]

Guys, is anyone facing problem dropping an item in a newly created DOM after page refresh? (New view is created after an API call which doesn't involve page reload)

[reppners]

@Supriya-bansal Creating a dropzone dynamically as a result of an API call and the draggable is already present on the page? *ngFor or *ngIf?

[Supriya-bansal]

@reppners I have something like this:

https://stackoverflow.com/questions/70924691/angular-dropped-item-disappear-on-drop-after-preview

Basically one drag-drop list of tiles and another is a mobile simulator. This mobile simulator is a dropzone and if I click on '+' icon on the right, i add a new page to this simulator but I do not refresh the whole page. If i drag the tile and drop in any of existing pages it works but for new page it doesn't work. I would really appreciate if you could help me here. I spent 3days figuring this out but seems i could use another pair of eyes.

[reppners]

@Supriya-bansal I've checked the code in the stackoverflow post but it is missing the bit that updates currentWidgetObject when a new page is added to the simulator. This may be the place where something goes wrong, as when more pages are added on page reload it seems to be working but when adding a page at runtime the issues appears.

[Supriya-bansal]

@reppners I did debug that function too.

get currentWidgetObject() { return this.appConfig.pages && this.selectedPage && this.appConfig.pages.find(page => page.id === this.selectedPage.id) ? this.appConfig.pages.find(page => page.id === this.selectedPage.id).widgets : []; }

this.selectedPage.id points to the id of selected page which is updated on click as:

onClickPage(event: any, page: any) { event.preventDefault(); this.selectedPage.id = page.id; this.rowCount = this.getRowCount(22); }

This statement in setCurrentDropZone function adds the tile to currentWidgetObject: this.currentWidgetObject.push(tileCopy);

[reppners]

@Supriya-bansal Did you debug if the this.appConfig.pages contains the selected page? Because if otherwise everytime the change detection runs a new empty array is returned that would match the described behaviour.

I'd suggest to refactor the code to set the currentWidgetObject in the onClickPage and on page init to avoid the overhead of running through the getter on change detection and also avoid dealing with a possibly missing page and thus empty.

[mustafairam]

error TS2322: Type 'string' is not assignable to type 'EffectAllowed'.

197 [dndEffectAllowed]="draggable.effectAllowed"

For this issue you need declare a type :

//app.component.ts

import { EffectAllowed } from 'ngx-drag-drop';

type EffectAllowedTypes = { data?: any; disable?: any; handle?: any; effectAllowed: EffectAllowed; };

//then inside the class declare the object draggable

draggable: EffectAllowedTypes = { data: 'myDragData', effectAllowed: 'all', disable: false, handle: false, };

It will work now