How to leave text selectable on draggable element in Angular 2 Dragula?

Question

I am using dragula in angular 2 application and I wonder if there is a way to leave text selectable, so like spans inside the draggable element should still behave as default, so you can highlight text on it. As far as I can say there seems not to be a way for it in dragula options. Maybe anyone knows simple way?

Answer 1

So I think I found the solution that I am okay with. I modified moves option in dragula service to be like this

moves(element, container, handle) {
                return element.nodeName === 'my-draggable-element' && handle.nodeName !== 'span'
            }

so when we try draggin our element on the place where span is located, we will not be able to do it.

And then in css I just added this kind of code:

my-draggable-element {
    span {
        -moz-user-select: text;
        -khtml-user-select: text;
        -webkit-user-select: text;
        cursor: text;
    }
}

so now text is selectable and the element is still draggable if we hold it on parts without text.