在angularjs指令链接函数中更改元素类

用户名

我正在尝试使用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>

这是两个指令的代码:

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

只要所拖动的元素在放置目标之一上处于药物状态,就可以正确调用该函数,所有这些都可以正常工作,但是类更改不会显示在浏览器上。没有任何内容显示在浏览器控制台中,因此不会引发任何错误,只是不会更改放置目标元素的外观。

斯特凡诺·达皮亚兹(Stefano Dalpiaz)

如果您使用与帖子中完全相同的HTML,则看不到样式更改的原因仅是CSS。标记中的元素是使用某些内联样式定义的,这些元素将优先于类中定义的任何样式(不带!important)。因此,您的课程可能已正确应用,但显示的边框和背景仍然是优先级较高的内容,它们是内联定义的。

如果删除了内联样式,而是使用CSS类,则只要divDragOver类优先于定义的新样式,它将按预期工作为此,在定义新类之前先定义divDragOver一个新类就足够了

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章