Sortable icon indicating copy to clipboard operation
Sortable copied to clipboard

[feature] multidrag pre-select and disable user select

Open UndercoverNL opened this issue 3 years ago • 4 comments

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.

UndercoverNL avatar Aug 05 '22 20:08 UndercoverNL

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

daminho avatar Aug 10 '22 00:08 daminho

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'.

UndercoverNL avatar Aug 10 '22 13:08 UndercoverNL

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

daminho avatar Aug 10 '22 13:08 daminho

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 avatar Aug 10 '22 13:08 UndercoverNL

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

UndercoverNL avatar Oct 16 '22 16:10 UndercoverNL

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.

tomasmenezes avatar Oct 19 '22 00:10 tomasmenezes

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 avatar Oct 19 '22 10:10 UndercoverNL

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 avatar Oct 19 '22 10:10 UndercoverNL

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

UndercoverNL avatar Oct 25 '22 21:10 UndercoverNL