1

I'm having some issues with my droppable area in my code. Everything is firing correctly and working as it should; however, the area in which I can effectively drop the numbered circles is not aligned correctly. It is hard to explain so here is the jsFiddle link below.

http://jsfiddle.net/sprink91/Fse2L/48/

The HTML code for the area that I would like to be droppable:

<div id="card_area">
  <div id="card1">
    <p class="shadow 1"></p>
    <p class="shadow 2"></p>
    <p class="shadow 3"></p>
  </div>
  <div id="card2">
    <p class="shadow 1"></p>
    <p class="shadow 2"></p>
    <p class="shadow 3"></p>
  </div>

user3757770
  • 11
  • 1
  • You have two rectangles, one on the left and one on the right... What isn't lined up correctly? – caspian Jun 19 '14 at 20:15
  • @caspian He probably means the balls are not lined up vertically once you drop them in. They are placed exactly where you put them, instead of dropping them into alignment. – TylerH Jun 19 '14 at 20:20
  • possible duplicate of [jQuery draggable + droppable: how to snap dropped element to dropped-on element](http://stackoverflow.com/questions/1254665/jquery-draggable-droppable-how-to-snap-dropped-element-to-dropped-on-element) – TylerH Jun 19 '14 at 20:24
  • Ah sorry about the confusion. If you open this fiddle in either chrome or safari, then you will see the problem. If you take the numbered tokens and drag them over the other circles on the rectangles, then the hover class is activated (the circle turns a different color). However, if you try this in either safari or chrome, the circle in the left rectangle doesn't accept a draggable object and hovering over the circle in the right rectangle causes the circle in the left rectangle to activate. It's bizarre, but if you try it in safari or chrome I hope you see what I mean. – user3757770 Jun 21 '14 at 21:24

0 Answers0