我正在尝试使用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;
}
当拖动的元素在一个放置目标上药物时,只要正确调用该函数,这一切都可以正常工作,但是类更改不会显示在浏览器上。浏览器控制台中没有显示任何内容,因此不会抛出任何错误,只是不会更改放置目标元素的外观。
答案 0 :(得分:1)
如果您使用与帖子中完全相同的HTML,那么您之所以没有看到样式更改的原因仅仅归功于CSS。
标记中的元素使用一些内联样式定义,并且这些元素将优先于类中定义的任何样式(不包含!important
)。因此,您的类可能已正确应用,但显示的边框和背景仍然是具有更高优先级的边框和背景,这些是内联定义的。
如果删除内联样式并改为使用CSS类,只要divDragOver
类优先于您定义的新类,它就会按预期工作。为此,在定义divDragOver
之前定义新类就足够了。