CODEWITHSUNDEEP
javascriptangularjsdrag-and-drop
user3772343
user3772343

Reputation: 131

Change element class in angularjs directive link function

I'm trying to set up a simple drag/drop interface using custom directives in Angularjs. I'm working from a number of samples collected from this site and others and it all seems fairly straightforward, but doesn't quite work. Specifically, I'm trying to implement a 'dragenter' handler that will change the appearance of a drop target when a dragged element passes over it. First, I'll show the HTML I'm working with:

    <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>

Here's the code for the two directives:

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');
            });
        }
    };
});

Here's the divDragOver class:

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

This all works fine as far as the function is properly called when the dragged element is drug over one of the drop targets, however the class change isn't shown on the browser. Nothing shows up in the browser console, so no errors being thrown, just doesn't change the appearance of the drop target element.

Upvotes: 3

Views: 4577

Answers (1)

Stefano Dalpiaz
Stefano Dalpiaz

Reputation: 1673

If you are using exactly the same HTML as in your post, the reason why you don't see the style change is simply due to the CSS. The elements in the markup are defined with some inline styling, and those will take precedence over any styles defined in a class (without the !important). So your class is probably applied correctly, but the border and background displayed are still the ones with higher priority, which are the ones defined inline.

If you remove the inline styles and instead use CSS classes it will work as you expect, as long as the divDragOver class takes precedence over the new one that you define. To do that, it is sufficient to define the new class before defining the divDragOver one.

Upvotes: 1

Related Questions