Skip to content
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

Prop to disable dragging #71

Open
sjstark opened this issue May 16, 2023 · 3 comments
Open

Prop to disable dragging #71

sjstark opened this issue May 16, 2023 · 3 comments

Comments

@sjstark
Copy link
Member

sjstark commented May 16, 2023

Currently the only way to prevent user dragging of a visual from vue-visual is to use a deep selector. I believe it'd be cleaner to add a prop like prevent-dragging or draggable='false' to vue-visual to add it to the html structure of the visual rather than rely on CSS.

@weotch
Copy link
Member

weotch commented May 22, 2023

What's the CSS solution you've found to work? In vue-ssr-carousel I do this:

https://github.com/BKWLD/vue-ssr-carousel/blob/1c1509d8eb56887e526f9cf9f70c449400639cbd/src/concerns/dragging.coffee#L236-L244

@sjstark
Copy link
Member Author

sjstark commented May 22, 2023

I wanted to avoid JS and use HTML or CSS. Best solution would be to use html imo, but my css solution was just using user-drag

/* Prevent dragging of thumbnails */
>>> img
    -webkit-user-drag none
    -khtml-user-drag none
    -moz-user-drag none
    -o-user-drag none
    user-drag none

@weotch
Copy link
Member

weotch commented May 22, 2023

Cool, yeah, if you wanna make a PR for this I'd accept it. I like no-drag (which is what vue-ssr-carousel uses) or prevent-dragging for the prop name because I prefer boolean props that default to false. Also, I think you can just do user-drag none and autoprefixer will automatically add vendor prefixes.

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

No branches or pull requests

2 participants