How can I make.droppable in jQuery UI work?

Question

I designed a simple drag and drop game to train my jQuery UI skills but for some reason I can not drop the circle on the same colored square. And when it works it goes behind the square instead of being on top :(. What did I do wrong in my code?

(In my snippet the circle snaps to the square but in chrome it doesn't)

Fiddle: https://jsfiddle.net/2udcoyjt/

JS here:

$(".draggers").draggable({
  revert: 'invalid'
});

$(".droppers").droppable({
  accept: function(item) {
    return $(this).data("color") == item.data("color");
  },
  drop: function(event, ui) {
    var $this = $(this);
    ui.draggable.position({
      my: "center",
      at: "center",
      of: $this,
      using: function(pos) {
        $(this).animate(pos, 150, "linear");
      }
    });
  }
});

Answer 1

You must use the ids of the droppers to define the accept and drop options for each, as the droppable the accept function is run on every drag event (start, stop, enter, leave), as well as on drags along the edge of the page. Try

console.log($(this).data.data("color") )

and you will see that you get red blue on every event (start, stop, enter, leave ..)

Here is a working fiddle