jQuery拖放使用css剪辑路径的多边形形状

我正在开发一个应用程序，但我在实现jQuery拖放时遇到问题。请看Code。jQuery拖放使用css剪辑路径的多边形形状

我正在开发的是使用css剪辑路径的多边形形状。当我拖动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"); 
     } 
    });     
    });

来源

2016-03-13 Aqdas

你之所以得到两个警报是所有div的是长方形的，即使你认为它们是三角形。因此，div在某些区域的重叠以及在这些区域中放置事件时会触发这两个div。 –

同样的问题，使用svg – Aqdas

正如所建议的那样，'div'elements是盒子，并且使用CSS它们被剪切，但边界是一个盒子。所以为了达到这个目的，你需要看看Mouse'x'＆'y'值。您必须计算三角形区域，并确定物品掉落时鼠标是否位于该区域内。 – Twisty

你对对方3格。您必须在HTML中使用svg，并在SVG中创建元素。

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

对于为例，在这里看到https://jsfiddle.net/EXqPa/31/

希望帮助

来源

2016-03-16 17:39:04 Greg

请使用jquery拖放。我的问题是使用拖放。点击或鼠标输入它适用于div剪辑路径和svg，但使用jquery为所有相交元素调用事件拖放。请检查我的代码。 – Aqdas

我检查你的代码。你有很多DIV彼此，所以你不能知道什么股利盘旋。感谢您的努力，您必须使用svg html来了解元素悬停在 – Greg

我为你做了其他的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/

来源

2016-03-17 10:16:56 Greg

之上。如果您在红色区域上按下滑动按钮，则会返回消息悬停蓝色。而它假设为悬停读取返回警报。 – Aqdas

，如果你使用jquery拖放，你会得到两次调用drop事件。这也是同样的行为，使用svg，我正在使用div – Aqdas

因此，我们必须删除转换：translate（-50％，-50％）;您的光标为\t。我找到了这个解决方案！ :) http://jsfiddle.net/32T2a/314/ – Greg

jQuery拖放使用css剪辑路径的多边形形状

回答

相关问题