Drag without text selection isssue

[scramatte]

Hi,

I need to allow drag without select
I'm using tailwind css , so I've added the class : select-none that disable text selection
Unfortunately when you do this it disable the drag scroll too.

Any idea?

Regards

[kvvasuu]

Hi,
I tested this out of curiosity on a test project and it works for me. I tried different variations but vue-dragscroll works fine every time.

Could you show your code?

[scramatte]

Hi,

With the following code is not working

<template>
<div class="w-full md:w-1/2 h-24 overflow-x-scroll border-2" v-dragscroll>
        <div class="overflow-auto h-full select-none draggable" style="width: 2000px;" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed feugiat augue. Vestibulum posuere pretium purus at fermentum. Nulla in euismod tellus. Integer ut sapien egestas, gravida lectus vel, vestibulum elit. Proin placerat luctus risus eu dignissim. Aenean sodales euismod sodales. Ut at mattis ligula. Quisque leo enim, interdum et velit id, efficitur facilisis lorem. Integer varius varius orci, non 
finibus neque venenatis ac. Sed vulputate metus ac sem pretium, ac dapibus dui porttitor. Duis nec eleifend purus. Nulla facilisi. Quisque id faucibus metus. Aliquam quis accumsan tellus, non molestie ante. Donec quis mollis felis. Suspendisse ultricies dui non ipsum pharetra, nec blandit erat pulvinar. Nulla diam quam, tempus et posuere quis, finibus sed orci. Integer non venenatis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis augue vitae leo ultricies cursus sed vel velit. Donec fermentum porttitor dolor eu eleifend. Donec mollis nisl at ligula semper, tempus vestibulum dui dapibus. Integer pellentesque eget tortor in mollis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus blandit nisi nec scelerisque luctus. Donec pharetra non nibh id interdum.
        </div>
</div>
</template>
<script>
import { dragscroll } from 'vue-dragscroll'
 
export default {
    directives: {
      dragscroll
    }
}
</script>

Regards

[kvvasuu]

I just created a new project via: npm create vite@latest.
Then I added Tailwind as instructed on the Tailwind website.
Then I installed vue-dragsrcoll: npm install vue-dragscroll.
I copied your code to the App.vue file.

You'll probably be surprised, but it works for me.

Have you tried doing this in a new clean project?

By the way, what's up with the "draggable" class? Is that your class? If it is, maybe that's the reason why it's not working.

[scramatte]

Which browser do you use ? I'm trying with firefox and chrome on a Mac.
I've copy the code to my current app.vue and it doesn't works for me. I'm going to try with a clean project tomorrow.

Note that I'm using framework7 + Konsta UI as base project
https://framework7.io/
https://konstaui.com/vue/framework7

The "draggable" class is useless and should be removed.

Regards

[ThisIsPuzzle]

Yes i have the same problem. I have a table with 20+ columns an alot a data. When trying to click and drag it selects the text and it doesn't work properly. I fixed it with adding the CSS property: user-select: none; on the table.