我在我的 div 上使用 Angular 拖放指令。
我也在使用 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 复制纯文本。
上面的两个代码片段都嵌套在一个带有类“panel”和 dnd-draggable 指令的 div 中。
有什么变通办法吗?我缺少任何指示吗?请帮忙。先谢谢了!
此外——我曾尝试调整 CSS 中的用户选择样式,但没有成功。 我的尝试:
<div class="panel-body" style="-webkit-user-select: all">
<p> THIS IS THE TEXT I WANT TO COPY</p>
</div>
最佳答案
此问题已在 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 元素时,您会看到下面的代码将 draggable 属性设置为 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)
}
关于css - 从可拖动的 angular-dnd-list div 复制文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37422375/