3

Plunker デモコード

<div>ディレクティブdragAndDropが属性として設定された要素があります。

<div ng-class="divClass" drag-and-drop>Drop files here</div>

(余談ですが、それほど重要ではありませんが、ng-class は期待どおりに動作していませんが、それは別の問題です) 私が望むのは、ユーザーがデスクトップから div にファイルをドラッグ アンド ドロップすることです。ただし、そうするとangular.bind()、ドロップイベントを検出するために使用します。もちろん、ドロップしたらe.stopPropagation()andを呼び出しe.preventDefault()ますが、ページはページのリダイレクトを続行します。前述の2つの方法が実行されない原因は何ですか?

dragAndDrop指令：

directive('dragAndDrop', function() {
  return {
    restrict: 'A',
    link: function($scope, elem, attr) {
      elem.bind('dragenter', function(e) {
        e.stopPropagation();
        e.preventDefault();
        // still can't get this one to behave:
        // https://stackoverflow.com/q/15419839/740318
        $scope.divClass = 'on-drag-enter';
      });
      elem.bind('dragleave', function(e) {
        e.stopPropagation();
        e.preventDefault();
        $scope.divClass = '';
      });
      elem.bind('drop', function(e) {
        var droppedFiles = e.dataTransfer.files;
        // It's as though the following two methods never occur
        e.stopPropagation();
        e.preventDefault();

        if (droppedFiles.length > 0) {
          for (var i=0,ii=droppedFiles.length;i<ii;i++) {
            $scope.files.push(droppedFiles[i]);
          }
        }
      });
    }
  };
});
4

1 に答える 1

11

Angular は、登録したイベント ハンドラーがいつトリガーされるかを認識しないため、スコープ変数を変更したことを Angular に通知する必要があります。関数でそれを行い$applyます。

$scope.$apply(function () {
    $scope.divClass = 'on-drag-enter';
});

ドロップハンドラーに関しては、あなたは正しいですvar droppedFiles = e.dataTransfer.files;。ステートメントの結果として実行時エラーが発生するため、後のステートメントは決して実行されません。

eは jQuery イベントですがdataTransfer、実際の DOM イベントのプロパティです。この問題を解決するには、プロパティを通じて元のイベントにアクセスする必要がありoriginalEventます。

var droppedFiles = e.originalEvent.dataTransfer.files;

アップデート

e.originalEventangularの前にjQueryを含めた場合にのみ必要ですが、plnkrでそれを行っていないため、そのソリューションは無効でした。申し訳ありません。

preventDefaultdragover イベントによるドロップ サポートをオプトインする必要があるようです(おそらく、これは他のイベントでも同様に実行できますが、テストしていません)。

elem.bind('dragover', function (e) {
    e.stopPropagation();
    e.preventDefault();
});

plnkr を更新しました。

于 2013-03-20T21:03:56.137 に答える