可拖动div背景在div1以上时为一种颜色，在div2以上时为另一种颜色

Question

我有一个可拖动的div，它最初位于蓝色标题上方，因此具有带有蓝色文本和白色边框的白色背景，因此非常醒目。 当将其拖到具有白色背景的页面其余部分上时，我希望背景变为蓝色，文本为白色和边框为蓝色。

可拖动的div使用绝对位置定位，因此实际上放置在标头元素的外部，因此它需要检测它在页面的哪个区域。

可以使用CSS或Javascript / jQuery完成此操作吗？

Answer 1

在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附加起来，至少我无法想象您如何将颜色更改应用于正确的元素。 颜色变化可以是一种功能，并且可以作为要素。