从可拖动的 angular-dnd-list div 复制文本答案

【问题标题】：Copy text from a draggable angular-dnd-list div从可拖动的 angular-dnd-list div 复制文本
【发布时间】：2016-09-22 04:28:40
【问题描述】：

我在我的 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 中复制纯文本。

上述代码 sn-ps 都嵌套在一个 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>

【问题讨论】：

想问完全相同的问题。在plnkr.co/edit/gavIVNtM8mwYrFsY5VeZ?p=preview 设置一个 plunkr。尝试使用鼠标选择输入框中的文本。行为不一致 - 在 Chrome/Safari 上运行良好。不适用于 Firefox/Edge...

标签： css angularjs copy-paste angular-dragdrop

【解决方案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 元素时，您会看到下面的代码将 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)
}

【讨论】：