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

Question

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

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

我会感谢你的帮助。

我的 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/

Answer 2

你们彼此有 3 个 div。您必须在 HTML 中使用 svg，并在 SVG 中创建元素。

    <svg xmlns="http://www.w3.org/2000/svg" ...>
      //content
    </svg>

例如，请参见此处https://jsfiddle.net/EXqPa/31/

希望有帮助