jQuery Drag and Drop on Polygon Shapes using css clip-path
<p>I am developing an application but i am facing issue when implementing jQuery Drag and Drop. Please have a look at <a href="http://codepen.io/anon/pen/eZdzVo" rel="nofollow">Code</a>.</p>

<p>What I am developing is Polygon shapes using css Clip Path. When i drag Swipe Me Circle and drop on Red it return alert for "Dropped on Red" but it also return alert for "Dropped on Blue" Whereas, Circle is Dropped on Red.</p>

<p>I will be Thankful for your Help.</p>

<p>My jQuery Code is :</p>

<pre><code>  $(function() {
    $( "#draggable" ).draggable();
    $( "#RedTriangle" ).droppable({
      drop: function( event, ui ) {
        alert("Dropped On Red");
      }
    });
    $( "#GreenTriangle" ).droppable({
      drop: function( event, ui ) {
        alert("Dropped On Green");
      }
    });
    $( "#BlueTriangle" ).droppable({
      drop: function( event, ui ) {
        alert("Dropped On Blue");
      }
    });                
  });
</code></pre>