我有一个可拖动的div,它最初位于蓝色标题上,因此具有蓝色文本和白色边框的白色背景,因此它很突出。 当它被拖动到具有白色背景的页面的其余部分时,我希望背景变为蓝色,文本白色和边框蓝色。
可拖动div使用absolute定位,因此实际上放在header元素之外,因此需要检测它所覆盖的页面区域。
可以使用CSS或Javascript / jQuery完成吗?
答案 0 :(得分:0)
在JQuery中,我想你可以捕获mouseOver事件(https://api.jquery.com/mouseover/),当它被触发时,你会看到一些检查是否同时发生同时发生的拖动,如果发生这种情况,请更改颜色mouseOver事件发生的元素。
代码的重要部分:
HTML:
<div draggable="true" class="bar">Drag me!</div>
<div id="foo"><p>To be dragged over.</div>
JQuery:在mouseOver上看看当时是否拖了另一个元素:
$( '#foo' ).mouseover(function() {
if ($('.bar').is('.ui-draggable-dragging')) { return; // change color in here. }
});
注意: 你必须通过id附加这个,至少我无法想象你如何将颜色变化应用于正确的元素。但是,颜色变化可以是一个功能,并且可以使用元素。