Multiple ghostClass ( Add Multiple Ghost Classes )

[withrvr]

Add Multiple Ghost Classes

Currently we can do

new Sortable(wrapper, {
    animation: 200,
    ghostClass: "bg-primary",
});

I want to do:

ghostClass: "bg-primary text-white",

[owen-m1]

I don't think this feature is necessary, you should just create a single class with all the styles you want for the ghost element

[jnns]

To help others find this issue quicker via search engines if they're also trying to use multiple CSS classes for ghostClass, here's the error message:

Uncaught DOMException: DOMTokenList.add: The token can not contain whitespace.

If utility CSS classes are used (for example with frameworks like TailwindCSS), it would be nice to set something like ghostClass: 'opacity-50 rotate-6 bg-blue-200' instead of creating a dedicated class for Sortable.js.

[suterma]

I would really like this feature, too. I am using vue.draggable.next downstream and with my CSS framework of choice (Bulma), they have multiple separate classes for different styling aspects.

I got (with vue.draggable.next):

sortable.esm.js?aa47:248 Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('has-text-success has-opacity-50') contains HTML space characters, which are not valid in tokens.
    at toggleClass (webpack-internal:///./node_modules/sortablejs/modular/sortable.esm.js:252:45)
    at Sortable._onDragStart (webpack-internal:///./node_modules/sortablejs/modular/sortable.esm.js:1818:18)

The proposed workaround for using a custom class is working, but the error is somewhat unexpected to the average user. This library would benefit from the ability to process multiple CSS classes.

[danwetherald]

@layer utilities {
  .my-custom-class {
    @apply text-gray-700 font-bold py-2 px-4 rounded-md;
  }
}

[adrianthedev]

I'd use this feature too. We know TailwindCSS has the apply method but that goes against what it's trying to achieve (not naming things 😅).

I would be able to contribute a bit of my time for this feature if the maintainers would be open to adding it.

cc @owen-m1