Copy text from a draggable angular-dnd-list div
<p>I am using the angular drag &amp; drop directive on my divs.</p>

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

<pre><code>&lt;div class="panel-heading dragHandle"&gt;
    &lt;h4&gt;Click &amp; drag here to move&lt;/h4&gt;
&lt;/div&gt;
</code></pre>

<p>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.</p>

<pre><code>&lt;div dnd-nodrag class="panel-body" draggable="true"&gt;
    &lt;p&gt; THIS IS THE TEXT I WANT TO COPY &lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>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.</p>

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

<p>Any work arounds? Any directives I am missing? Please help. Thanks ahead!</p>

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

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