SortableJS / ngx-sortablejs

Angular 2+ binding to SortableJS. Previously known as angular-sortablejs
https://sortablejs.github.io/ngx-sortablejs/
MIT License
466 stars 160 forks source link

Compatibility with the Ivy view engine #283

Open Yawarzy opened 1 year ago

Yawarzy commented 1 year ago

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 1 year ago

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

IngMichaelMayr commented 1 year ago

Hi, got the same problem on my side

IngMichaelMayr commented 1 year ago

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 1 year ago

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

Yawarzy commented 1 year ago

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

stuartmackey commented 1 year ago

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

nzbin commented 1 year ago

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

alexisGandar commented 1 year ago

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

alexisGandar commented 12 months ago

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

COBRASoft5 commented 12 months ago

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 11 months ago

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

adam-drozdz-ie commented 11 months ago

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 11 months ago

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

adam-drozdz-ie commented 11 months ago

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 🤔

danitoro97 commented 11 months ago

u can use config , https://liquid-js.github.io/nxt-components/demo/sortablejs#example-4 look demo

adam-drozdz-ie commented 11 months ago

u can use config , https://liquid-js.github.io/nxt-components/demo/sortablejs#example-4 look demo

Great, thank you!

basvandorst commented 11 months ago

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 8 months ago

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!