从可拖动的角度dnd列表分区复制文本

Question

我正在使用角度拖动&在我的div上丢弃指令。

我也在使用Bootstrap CSS面板。面板标题就是我使用的dnd-dragHandle。

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

我希望整个div可以基于标题进行拖动，但一旦进入div(显示文本的地方)，我就使用指令dnd-nodrag。当光标在面板标题内而不在面板标题上时，您无法拖动div，因此当前无法执行此操作；但是，我希望能够在div中复制文本。

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

在我看来，nodrag指令只允许在输入元素内选择/复制文本。我需要能够从div复制纯文本。

上面的两个代码片段都嵌套在div中，其中包含类"panel"和dnd-draggable指令。

有什么解决办法吗？有没有我遗漏的指令？请帮忙。谢谢！

此外，我曾尝试调整CSS中的用户选择样式，但没有成功。我的尝试：

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

Answer 1

此问题已在bugzilla、中报告

问题链接：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

然而，我已经使用解决方案解决了这个问题

当您检查Div元素时，您会看到以下代码的可拖动属性设置为true，因此在firefox中，您无法使用鼠标光标选择文本。

<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>

解决方法：在html中，

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

在JS文件中，

/**
*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)
}