MultiDrag: angular-sortablejs does not work with SortableJS's MultiDrag plugin

[runninghare]

Current angular-sortablejs does not work with SortableJS's MultiDrag plugin: https://github.com/SortableJS/Sortable/tree/next-version/plugins/MultiDrag

Do we have any plan to implement it?

[smnbbrv]

Hi @runninghare

have you tried to pass those multidrag options to sortablejsOptions? Looks like it should work right away

[runninghare]

Yes I tried. It does not work. See another post I created: https://github.com/SortableJS/Sortable/issues/1527

[sorinfratila]

Hey @smnbbrv , I saw in one of the issues that multidrag will be supported once 1.10 is released. I can see that it has been released, but the ngx-sortable is still using 1.9. SO my question is, could we use sortablejs 1.10 with ngx-sortable 3.1.x?

[smnbbrv]

Hi @sorinfratila

that's a long story.

The concept of the plugins is not really this-lib-friendly. The full story is here https://github.com/SortableJS/Sortable/pull/1548

However if you try this in e.g. main.ts

import { Sortable, MultiDrag } from 'sortablejs';

Sortable.mount(new MultiDrag());

and use the multidrag options it should potentially work.

[h5aaimtron]

@smnbbrv

I tried this in my main.ts but it says the module has no exported member 'Sortable'. I grabbed the latest type definitions, etc. Any thoughts or guidance? Thanks!

[h5aaimtron]

@smnbbrv

As it turns out, you're right, this is possible with the base install. What I think is tricking people is that it is unclear during the drag as only the first item really shows as being dragged until dropping. It took me a few tries to realize it was working. This definitely works if you get the latest versions though and you don't need to mount the plugin, just pass the options in.

[yuliankarapetkov]

@smnbbrv

As it turns out, you're right, this is possible with the base install. What I think is tricking people is that it is unclear during the drag as only the first item really shows as being dragged until dropping. It took me a few tries to realize it was working. This definitely works if you get the latest versions though and you don't need to mount the plugin, just pass the options in.

How did you mange to get it working?

By the way, I have this case where I want to pass the selected elements programmatically. I see that in the library docs there's this concept of SortableUtils, but is this possible with the Angular wrapper?

elect(el:HTMLElement) — select the given multi-drag item

[h5aaimtron]

@yuliankarapetkov

I ended up trying a ton of stuff to get it to work, but his general directions were pretty close. In my main.d.ts I added:

`import { MultiDrag } from 'sortablejs'; import Sortable from 'sortablejs';

Sortable.mount(new MultiDrag());`

I had to do it this way because the typings don't export Sortable in a way that TypeScript likes. After that, I just passed in my params in the options attribute like so:

<ul [sortablejs]="items" [sortablejsOptions]="{ animation: 150, multiDrag: true, multiDragKey: 'CTRL', selectedClass: 'selected' }"> <li *ngFor="let item of items">{{item.name}}</li> </ul>

I had to remove the select classes I setup manually. The only problem with this drag functionality is that the 2nd item doesn't look like it is being dragged until you drop and sometimes it positions it funny. I'd prefer it to look better, but it works.

[holyboom]

Hi @h5aaimtron, as 2021, do you know how to fix this ? "the 2nd item doesn't look like it is being dragged until you drop"

I think It is really important for UX to show how many items are being dragged.

[h5aaimtron]

@holyboom I don't remember the solution I came up with that well in this particular case. I think what I did was swap out the image being dragged with a generic stacked images image if that makes sense. I'm using the @angular/cdk package now instead of ngx-sortablejs as I was able to implement that with a few minor modifications from the example code it provided.