javascript - 使用 css 剪辑路径在多边形形状上进行 jQuery 拖放

Question

我正在开发一个应用程序，但在实现 jQuery 拖放时遇到问题。请看Code .

我正在开发的是使用 css 剪辑路径的多边形形状。当我拖动 Swipe Me Circle 并放在红色上时，它会返回“Dropped on Red”的警报，但它也会返回“Dropped on Blue”的警报，而 Circle 是 Dropped on Red。

感谢您的帮助。

我的 jQuery 代码是:

  $(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");
      }
    });                
  });

Answer 1

我为您做了另一个 JsFiddle。随着 svg。

我使用:

<svg width='100%' height='50%' viewBox="0 0 120 120" preserveAspectRatio="none">
  <polygon class="right" points="51 37, 100 100, 100 1"/>
  <polygon class="left" points="0 1,0 100,49 37"/>
  <polygon class="bottom" points="50 37, 1 100, 99 100"/>
</svg>

看这里http://jsfiddle.net/32T2a/313/