Disable draggable link in Firefox

[campopianoa]

Hello,

Inside of a link component, I have a slider bar.

When I drag around the slider, the outer link wants to be dragged instead, preventing me from interacting with the slider as shown here:

In Chrome I can fix this by disabling the draggable nature of the link with this CSS and custom role.

.anvil-role-no_drag {
-webkit-user-drag: none;
-moz-user-drag: none;
user-drag: none;
}

However, in Firefox, I cannot manage to disable the dragging of the link.

Does anyone know of a somewhat reliable way of preventing the draggable property of link components?

Here is a clone to demonstrate:
https://anvil.works/build#clone:5ZV74M4MR3BWEVAV=JA5HGQX3TXYOUAJTVXO6ZU4Y

[stucork]

What’s the link component adding here?
It might be easiest just to remove the link component and put those features back in rather than to remove the dragging.

Here’s a few others flags you could try

 {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
}

Have you tried draggable=false?
https://www.w3schools.com/tags/att_global_draggable.asp

[campopianoa]

Hey @stucork,

@stucork

What’s the link component adding here?

Good question. I’m building a survey platform. The widgets are organized into sections and the link component allows me to highlight the currently active section (via the click event).

For example, you can see how the the border changes when I click on a new section.

I did actually try those flags as well as the “draggable” property described nicely on w3schools. I assumed I was missing something obvious about how to accomplish this. Unfortunately, in Firefox they do not seem to work.

[campopianoa]

I wonder if I should get rid of the link container and try using an onclick function in JS to control the section highlighting instead.

If I use a custom HTML form I could use something like:

<script>
$(this).click(function(){

//here I would call into Python to toggle my borders as I do above

});
</script>

This seems like something to consider…

[stucork]

You could also throw in AnvilAugment

if you don’t want to dig around the javascript

from AnvilAugment import augment

class Form(TemplateForm):
  def __init__(self, **properties):
    augment.set_event_handler(self, 'click', self.set_background)

  def set_background(self, **event_args):
    self.background = '1px solid black'

[campopianoa]

That’s amazing. Yes indeed that would work and likely be helpful for other things as well. Thanks very much for creating that tool Stu. Truly Incredible.

[campopianoa]

@stucork Great news.

As I mentioned above, I tried adding my own onclick function to control the CSS, but again I got hit with not being able to distinguish between the anvil components on the screen (all sections were being affected when referring to this). AFAICT I couldn’t use v._anvil.element because I wasn’t calling JS from Python but rather JS only.

All this to say that I tried AnvilAugment from your repo and it worked immediately with basically one line of code. This also frankly fixed a lot of other things that were annoying about using links as containers (e.g., the colors, outlines, cursor changes, etc).

This is amazing work and seems like pure magic.

Thanks again Stu.