Question

我正在开发一个应用程序，但在实现jQuery Drag and Drop时我遇到了问题。请查看Code。

我正在开发的是使用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中创建您的元素。

Trim(',')

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

希望有所帮助

jQuery使用css clip-path

2 个答案: