SortableJS/ngx-sortablejs

Compatibility with the Ivy view engine

Yawarzy opened this issue · 18 comments

Yawarzy commented

Hi,
We want to upgrade our project to the Angular 16, so we need to confirm whether the libraries we are using are ivy compatible or not, so we would like to confirm whether this library is compatible with the Ivy or not ?
Thanks

inexuscore commented

I've upgraded to Angular 16 and this is the only package lagging behind. Any news on this? A fork would be nice too.

  • 👍1
IngMichaelMayr commented

Hi, got the same problem on my side

IngMichaelMayr commented

As a fix for me, I decided to switch from ngx-sortablejs to angulars own drap and drop interface: https://material.angular.io/cdk/drag-drop/overview#transferring-items-between-lists

COBRASoft5 commented

Unfortunately, that doesn't work very well with display: grid :(.

  • 👍3
Yawarzy commented

Hi guys, we were using nx so we just took the library into the project.

stuartmackey commented

I discovered this library -> https://github.com/Liquid-JS/nxt-components it includes a fork that only needs a couple of tweaks to get working. Have a look at the breaking changes to see what needs to be renamed -> https://github.com/Liquid-JS/nxt-components/blob/master/BREAKING_CHANGES.md

  • 👍3
nzbin commented

Hi, folks, I suggest you can try the ng-dnd library
https://github.com/ng-dnd/ng-dnd

  • 👍2
alexisGandar commented

You guys think there is any chance the plugin get updated ?

alexisGandar commented

Here is a link of a fork working for angular16 for the ones that are interested : https://github.com/epicuro/ngx-sortablejs

  • 👍1
COBRASoft5 commented

Here is a link of a fork working for angular16 for the ones that are interested : https://github.com/epicuro/ngx-sortablejs

Is there an npm package for this fork available?

guoliang commented

Here is a link of a fork working for angular16 for the ones that are interested : https://github.com/epicuro/ngx-sortablejs

Is there an npm package for this fork available?

You can install package from his fork with npm
npm install https://github.com/epicuro/ngx-sortablejs

  • 👍1
adam-drozdz-ie commented

Here is a link of a fork working for angular16 for the ones that are interested : https://github.com/epicuro/ngx-sortablejs

I tried to use this fork, but I'm getting this error:
Module not found: Error: Can't resolve 'ngx-sortablejs-app'
I've installed the fork with npm install https://github.com/epicuro/ngx-sortablejs and then added it to app.module.ts as instructed by the readme.

Here's a repository to reproduce this problem.
Could someone help me resolve it?

danitoro97 commented

Hi, have same problem that @adam-drozdz-ie . I found another repo and it works fine https://www.npmjs.com/package/nxt-sortablejs

  • 👍3
  • 🎉1
adam-drozdz-ie commented

Hi, have same problem that @adam-drozdz-ie . I found another repo and it works fine https://www.npmjs.com/package/nxt-sortablejs

Thanks for the suggestion, but I can't find the equivalent of [sortablejsOptions] in nxt-sortablejs 🤔

basvandorst commented

Is there an npm package for this fork available?

You can install package from his fork with npm npm install https://github.com/epicuro/ngx-sortablejs

Thanks for this fork! Installation should be go via a subfolder of this fork.

https://gitpkg.now.sh could fix it because npm install http://github.com/.... does not allow installation from a repo subfolder

@adam-drozdz-ie @danitoro97 this works for us:
npm install https://gitpkg.now.sh/epicuro/ngx-sortablejs/dist/ngx-sortablejs

tiro-reflact commented

I had the same problem as described above for a little while now, that this package is lacking behind with its version.
But today I found the solution and it's the official way by Angular!

I was able to fully remove and replace the following dependencies: sortablejs, @types/sortablejs & ngx-sortablejs

I installed the Official Angular Component Development Kit

npm i @angular/cdk

and imported the following module

import { DragDropModule } from '@angular/cdk/drag-drop';

DragDropModule

I would say that you can probably use all the features of ngx-sortablejs here too (with slightly different syntax) and I have to say, all the ones I've used can do the Angular Library even better (the auto-scroll feature for example)!

Here's the link for the documentation: https://material.angular.io/cdk/drag-drop/overview
Don't be scared that it's the Angular Material Documentation and you don't use Material: the Component Development Kit is fully independent from Material and can be used in any other way, for example in combination with Bootstrap.

And take a look here at the moveItemInArray function, it saved me multiple lines of code: https://material.angular.io/cdk/drag-drop/api#cdk-drag-drop-functions

I'd recommend that you read the full documentation about Drag and Drop to find every feature that you need (they are named different sometimes in comparison to ngx-sortablejs).

And while you're exploring the CDK: It has some really cool directives to explore too for example the virtual scrolling!

  • 👍3
  • ❤️1