Textselection by mouse is not working

[netify]

trafficstars

• I'm submitting a ... [x] bug report [ ] feature request [ ] question about the decisions made in the repository

• What is the current behavior? I am using ng2-dnd to sort some simple DIVs. Inside the divs are small forms with textboxes and textareas. The problem ist, that it is not possible to select text in the boxes. Not by doubleclick, not by click within the text... The problem does not appear in Chrome but all my other browsers on my windows machine.

• Please tell us about your environment:

• Angular version: 4.2.2
• Browser: [all BUT Chrome!!! ]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[optimistex]

I have same problem.

My HTML-code:

............................
<tbody dnd-sortable-container [sortableData]="characteristicList" [dropZones]="['characteristics']">
<tr *ngFor="let item of characteristicList; let idx = index"
    dnd-sortable [sortableIndex]="idx" (onDragEnd)="saveSortFields(characteristicList)">
    <td class="lsu-hide-xs lsu-cursor-move" title="Изменить порядок" dnd-sortable-handle>
        <svg class="ls-icon-button ls-icon-button_gray lsu-cursor-move">
            <use appFixSvg xlink:href="#icoMoon-move"></use>
        </svg>
    </td>
    <td>{{item.name}}</td>
    <td class="lsu-hide-sm">{{item.fieldTitle}}</td>
............................

My result: http://joxi.ru/Q2KBaqh4WZWlmj

Problem I want begin drag only from first column. You can see cross image on the first column. And I want to select text in other columns of each rows. But I can not selecting text. In all columns I see cursor hand and cant selecting text.

Help me please. Thanks!

[anil-kk]

facing same issues, is there any progress with this issue

[optimistex]

@anil-kk I solved it through a CSS. The CSS:

tbody, tr{
   cursor: inherit !important;
   user-select: inherit;
}
.lsu-cursor-move {
   cursor: move !important;
}

And add the class lsu-cursor-move to cell that I use for dnd:

<td class="lsu-hide-xs lsu-cursor-move" title="Изменить порядок"  dnd-sortable-handle>
    .........
</td>

[anil-kk]

@optimistex thanks for your solution.

There is another solution that we used in our code at this moment, Angular text can not be selected when draggable is enabled <div dnd-sortable [draggable]="true"></div> by disabling dragging, text can be selected, specially when editing input fields <div dnd-sortable [draggable]="false">

[optimistex]

@anil-kk Thanks! Since I use tables with the dnd I mixed your Idea with my CSS fix.

Now I have:

<tr *ngFor="let item of items; let idx = index" dnd-sortable [draggable]="false" [sortableIndex]="idx" (onDragEnd)="saveSortFieldsOfReference()">
                        <td class="lsu-hide-xs" dnd-sortable-handle [draggable]="true">

[dnd-sortable-handle] {
  cursor: move !important;
}
tbody, tr, tr svg {
  cursor: inherit !important;
}

It's little better than my first solution.