Hi Friends, how do we disable dragging in a Kobweb...

# kobweb

[Shubham Singh]

Hi Friends, how do we disable dragging in a Kobweb app globally? Something like writing:

html {
  user-drag: none;
}

[David Herman]

Use an @InitSilk block and then ctx.stylesheet.registerStyle("html")

[David Herman]

Something like https://github.com/bitspittle/bitspittle.dev/blob/c4b48f08a4c014da80911562979bea4acf6beb92/site/src/jsMain/kotlin/dev/bitspittle/site/AppStyles.kt#L42

[Shubham Singh]

I tried it but the console says this

[Shubham Singh]

This is my code

[Shubham Singh]

The complete error message is:

Style block declarations cannot contain Modifiers that specify attributes. Only style modifiers are allowed here.

Details:
	CSS rule: "html"
	Attribute(s): "draggable"

Please search your `@InitSilk` code for a line like `ctx.stylesheet.registerStyle("html")` and remove the offending attribute(s).

[David Herman]

Ah easy fix, use extraModifier for attributes

[David Herman]

Wait scratch that, I'm thinking of CssStyle

[David Herman]

I'll look into this shortly when I get to my desk and send you code that you should use instead. Probably you should just use Kotlin/JS here, you can do it in init silk if you'd like, or inside a LaunchedEffect block inside an app.

[Shubham Singh]

No problem, it's not urgent at all
Take your time

Probably just celebrate Christmas for now 🎅 😄 We can look into this afterwards

[David Herman]

I'm having a fun day! Rain incoming so just family is just relaxing.

I wanted to suggest something using modifiers but it's tricky -- the upstream Compose HTML methods set some APIs to internal which I would have loved to suggest to you -- but here's an easy suggestion:

val rootHtmlElement = window.document.documentElement as HTMLElement
rootHtmlElement.draggable = false

I wouldn't necessarily do that inside an InitSilk block at this point -- technically, that's not a silk thing you're doing at this point -- but maybe inside your @App block?

@App
@Composable
fun AppEntry(content: @Composable () -> Unit) {
   LaunchedEffect(Unit) {
      val rootHtmlElement = ...
      rootHtmlElement.draggable = false
   }
   ... other stuff ...
}

[David Herman]

Actually, I just realize you wrote user-drag

[David Herman]

which I guess doesn't exist but is capturing some idea you're trying to figure out in html / css?

[David Herman]

Oh it does exist as a webkit css property? Sorry, looking more into it

[David Herman]

Maybe try this and report back?

@App
@Composable
fun AppEntry(content: @Composable () -> Unit) {
   LaunchedEffect(Unit) {
     // Disable drag/drop globally
     document.addEventListener("dragstart", { event -> event.preventDefault() })
     document.addEventListener("drop", { event -> event.preventDefault() })
     document.addEventListener("dragover", { event -> event.preventDefault() })
   }
   ... other stuff ...
}

[David Herman]

That's drag/drop. You might be asking about disabling text selection though?

[David Herman]

If you want to disable text selection too, bringing it all together:

@InitSilk
fun init(ctx: InitSilkContext) {
    ctx.stylesheet.registerStyleBase("html") {
        Modifier.userSelect(UserSelect.None)
    }
}

@App
@Composable
fun AppEntry(content: @Composable () -> Unit) {
   LaunchedEffect(Unit) {
     // Disable drag/drop globally
     document.addEventListener("dragstart", { event -> event.preventDefault() })
     document.addEventListener("drop", { event -> event.preventDefault() })
     document.addEventListener("dragover", { event -> event.preventDefault() })
   }
   ... other stuff ...
}

[Shubham Singh]

Thank you very much for all this effort David! It's just commendable how dedicated you are 🙌

I'm going to try it and report back ⏳

[Shubham Singh]

You might be asking about disabling text selection though?

Text selection is okay, I just don't want users to be able to drag-and-drop UI components like buttons, cards, etc.

[Shubham Singh]

Don't want users to be able to do this

Screen Recording 2024-12-25 at 9.16.09 AM.mov

[Shubham Singh]

Maybe try this and report back?

This worked as expected ✅ Thank you 🙌

[David Herman]

You're welcome! Thanks for confirming