anglejsディレクティブリンク関数の要素クラスを変更します

Angularjsのカスタムディレクティブを使用して、単純なドラッグアンドドロップインターフェイスを設定しようとしています。私はこのサイトや他のサイトから収集された多くのサンプルから作業しており、すべてがかなり簡単に思えますが、完全には機能しません。具体的には、ドラッグされた要素がドロップターゲットを通過したときにドロップターゲットの外観を変更する「dragenter」ハンドラーを実装しようとしています。まず、使用しているHTMLを表示します。

    <div cstyle="width: 900px; height: 600px; border: 1px solid #999">
        <div id="draggable" ses-draggable style="width: 200px; height: 150px; background-color: #777">Drag Me!</div>
        <div id="dropTarg1" ses-drop-target style="width: 100px; height: 100px; border: 1px solid #888; background-color: #aaa">Drop target 1</div>
        <div id="dropTarg2" ses-drop-target style="width: 100px; height: 100px; border: 1px solid #888; background-color: #aaa">Drop target 2</div>
        <div id="dropTarg3" ses-drop-target style="width: 100px; height: 100px; border: 1px solid #888; background-color: #aaa">Drop target 3</div>
    </div>

2つのディレクティブのコードは次のとおりです。

ems2App.directive('sesDraggable', function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            angular.element(elem).attr("draggable", "true");
        }
    };
});

ems2App.directive('sesDropTarget', function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.bind('dragenter', function (e) {
                angular.element(e.target).addClass('divDragOver');
            });
            elem.bind('dragleave', function (e) {
                angular.element(e.target).removeClass('divDragOver');
            });
        }
    };
});

divDragOverクラスは次のとおりです。

.divDragOver {
    border: 3px solid black;
    background-color: green;
}

ドラッグされた要素がドロップターゲットの1つをドラッグしているときに関数が適切に呼び出される限り、これはすべて正常に機能しますが、クラスの変更はブラウザに表示されません。ブラウザコンソールには何も表示されないため、エラーはスローされず、ドロップターゲット要素の外観は変更されません。