3

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 からプレーン テキストをコピーできるようにする必要があります。

上記のコード スニペットは両方とも、クラス "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>
4

1 に答える 1

0

この問題はバグジラで報告されています。

問題のリンク: 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)
}
于 2017-04-13T12:08:29.767 に答える