Draggable content is not selectable

[dvago]

I've been integrating this library within a UI where I need to have draggable and resizable dialog boxes.

The script runs smoothly however I realised that there is no way to make the content of the draggable block selectable by the user.

The draggable instance has the property dragHandle set to the dialog's header and I tweaked the pseudo element within the class .vdr.active with the following style:

&:before {
   z-index: -1;
   outline: none;
}

I've also tried to create a simple version with a placeholder text and it seems that there is nothing I can do, neither overriding the css with user-select: text and pointer-events attribute.

[oshell]

have the same issue

[KnownRock]

You can prevent the event from bubbling in the upper node of the input

<vue-drag-resize :isActive="false" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize"> 
    <div @mousedown="mousedown" @mouseup="mouseup">
       <h3>Hello World!</h3>
       <p>{{ top }} х {{ left }} </p>
       <p>{{ width }} х {{ height }}</p>
       <input></input>
    </div>
</vue-drag-resize>

new Vue({
    el:container,
    data(){
        return {
            width: 0,
            height: 0,
            top: 0,
            left: 0
        }
    },
    methods: {
        resize(newRect) {
            this.width = newRect.width;
            this.height = newRect.height;
            this.top = newRect.top;
            this.left = newRect.left;
        },
        mousedown(e){
            e.stopPropagation()
        },
        mouseup(e){
            e.stopPropagation()
        }
    }
})