How can i tell if an draggable element is dropped on another draggable element, with Jquery?

Question

I'm using Jquery "draggagle" & "droppable".
When i drop an draggable element on another draggable element i'd like to change the background-color of the element in the bottom. (Not the dropzone)

Some kind of "mouseover", but "elementover" :)

What have i tried?
Barely nothing, i'm trying to figure out what syntax to use.
There is a "over" function for "droppable" but it only works on "dropzones".
Jquery has a "hover.()" function, but it works for the mouse, i'd like it to be when hovering with another element..
Is this possible?

UPDATE

Fiddle:
https://jsfiddle.net/0apuqnxd/27/

$('.elementsDiv').droppable({
  over: function(){
    $(this).css('background-color', 'red');
  },
  out: function(){
    $(this).css('background-color', '');
  }
});

I'm starting to get close, now my problem is that is that if another element is crossing by, the color changes back when "out".

Answer 1

if its ok with you to use another javascript library

try this one

go down to "Drag and drop" sample you will find the code to what you want.

http://interactjs.io/