Skip to content

[feature] multidrag pre-select and disable user select #2183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
UndercoverNL opened this issue Aug 5, 2022 · 9 comments
Closed

[feature] multidrag pre-select and disable user select #2183

UndercoverNL opened this issue Aug 5, 2022 · 9 comments

Comments

@UndercoverNL
Copy link

So I am in need of a function in the multidrag plugin, which allows you to pre-select specific items in a list without the user needing to select them. I tried achieving this by assigning the selectedClass to the items which I want to pre-select, however this didn't work, and after looking in to the module, its probably because the item is also added to the multiDragElements array inside the MultiDrag.js file. Which doesn't seem to be exported in any way, so there won't be a way to add your own items to this.

I think this would be easily achievable by exporting the multiDragElements array so that you can add or remove items from it to achieve pre-selected behaviour.

Another function I would need with the function described above, is a variable which would disable users to select and unselect items. Which can just be a boolean.

The end behaviour of this (as an example) would be that you can have groups, which have items inside of them, and if you drag the group the items will drag with the group. Instead of moving just the group without the items with using default Sortable, or the user needing to select each product before moving the category to move them with their category.

@daminho
Copy link

daminho commented Aug 10, 2022

Have you tried to use Sortable.utils.select to select the items you want to pre-select

@UndercoverNL
Copy link
Author

Have you tried to use Sortable.utils.select to select the items you want to pre-select

I didn't before you said, I guess I looked over it in the documentation, anyway, now I tried, and it seems to error

39: Property 'select' does not exist on type 'Utils'.

@daminho
Copy link

daminho commented Aug 10, 2022

Have you tried to use Sortable.utils.select to select the items you want to pre-select

I didn't before you said, I guess I looked over it in the documentation, anyway, now I tried, and it seems to error

39: Property 'select' does not exist on type 'Utils'.

try 'utils' with lowercase 'u', I guess

@UndercoverNL
Copy link
Author

UndercoverNL commented Aug 10, 2022

Have you tried to use Sortable.utils.select to select the items you want to pre-select

I didn't before you said, I guess I looked over it in the documentation, anyway, now I tried, and it seems to error
39: Property 'select' does not exist on type 'Utils'.

try 'utils' with lowercase 'u', I guess

that is what I tried, and that errors this.

const element = document.getElementById('elementId');
Sortable.utils.select(element);

@UndercoverNL
Copy link
Author

Still looking for a solution for this, is there any?

@tomasmenezes
Copy link

that is what I tried, and that errors this.

const element = document.getElementById('elementId');
Sortable.utils.select(element);

That last call should work if the plugin is mounted correctly/if the fully mounted complete version of Sortable is used.
An example is provided in #2189, where other shortcomings of the method are also pointed out.

@UndercoverNL
Copy link
Author

UndercoverNL commented Oct 19, 2022

everything works expect for the call @tomasmenezes its a ts error, but even when running a development build it won't work. Does it mean sortable can't be ran in ts? As the error is very clear and doesn't go away no mather what or where I try to put it.

image

PS: This was just an try, normally I use it after creating the function

@UndercoverNL
Copy link
Author

aa I see the function does work in development build, however, 2 problems, 1 is the one I described above. Which is that it will error fataly in production build due to the ts error.

Another one is that I would like to select the items being selected based on the choosen item which is (going to be) moved

I tried achieving this using:

onChoose: function (evt) {
                const product = document.getElementById('2');
                console.log(product);
                Sortable.utils.select(product);

Which didn't work directly, I still need to first select the item I am going to move, and then it works. But not on the first try instantly moving it. Anyone an idea if this is possible?

The end result of this would be to create pre-set groups of categories, with items inside them. If you move a category all products inside it will move with the category, and you can move any category you want while its items will move with it.

@UndercoverNL
Copy link
Author

Seemed to be no solution for this. Now mapped each group inside 1 element and created them as sortable each.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants