Copy text from a draggable angular-dnd-list div

Question

I am using the angular drag & drop directive on my divs.

I am also using Bootstrap CSS paneling. The panel header is what I am using as the dnd dragHandle.

<div class="panel-heading dragHandle">
    <h4>Click & drag here to move</h4>
</div>

I want the entire div to be draggable based on the header, but once inside the div (where text is displayed), I am using the directive dnd-nodrag. This currently works as you are not able to drag the div when the cursor is inside and not on the panel header; however, I would like to be able to copy the text inside the div.

<div dnd-nodrag class="panel-body" draggable="true">
    <p> THIS IS THE TEXT I WANT TO COPY </p>
</div>

As it seems to me, the nodrag directive only allows selection/copying of text inside of an input element. I need to be able to copy the plain text from the div.

Both of the above code snippets are nested inside of a div with the class "panel" and the dnd-draggable directive.

Any work arounds? Any directives I am missing? Please help. Thanks ahead!

Also -- I have tried adjusting the user-select styling in the CSS with no luck. My attempt:

<div class="panel-body" style="-webkit-user-select: all">
    <p> THIS IS THE TEXT I WANT TO COPY</p>
</div>

Answer 1

This issue has been reported in the bugzilla,

Issue Link : https://github.com/react-dnd/react-dnd/issues/178

https://bugzilla.mozilla.org/show_bug.cgi?id=195361

https://bugzilla.mozilla.org/show_bug.cgi?id=800050

However I've fixed this issue using a work around,

When you inspect the Div element, you'll see the below code having draggable attribute set to true hence in firefox you cannot select the text using mouse cursor.

<li ng-repeat="item in models.lists.A" dnd-draggable="item" dnd-moved="models.lists.A.splice($index, 1)" dnd-effect-allowed="move" dnd-selected="models.selected = item" ng-class="{'selected': models.selected === item}" class="ng-scope" draggable="true">
          <div dnd-nodrag="" draggable="true">
            <div class="theheader" dnd-handle="" **draggable="true"**>A header</div>
            <div class="thebody">
              Selecting test works on Chrome/Safari.  Doesn't work on Firefox/Edge
              <input type="text" ng-model="item.label" class="ng-pristine ng-valid">
            </div>
          </div>
        </li>

Workaround : in html,

<input type="text" ng-model="item.label" class="ng-pristine ng-valid"
ng-click="vm.disableDrag()" ng-blur="vm.enableDrag()">

in JS file,

/**
  *find li and disable the draggable feature, so the input can be edited using mouse in firefox  
  */
vm.disableDrag= function($event) {
    var $li = $event.currentTarget.parentNode;
    angular.element($li).attr("draggable", false)
}
/**
 * find li element and Enalbe the draggable feature, on blur of the editable input
 */
vm.enableDrag = function($event) {
    var $li = $event.currentTarget.parentNode;
    angular.element($li).attr("draggable", true)
}