圆形或圆形 Draggable/Droppables

Posted 2023-05-08

【中文标题】圆形或圆形 Draggable/Droppables

【英文标题】：Round or circular Draggable/Droppables

【发布时间】：2013-09-11 12:52:15

【问题描述】：

我一直在尝试让 jQuery UI 的可拖动/拖放功能与圆形元素一起正常工作，但似乎我尝试过的所有方法都使元素在视觉上是圆形的，但它们仍然被视为正方形。

我遇到的具体问题是，当使用具有边框半径或剪辑路径的可放置对象时，可拖动对象可以放置在不应该存在的“角落”上......

为了更好地说明我的问题：

Border-radius Example

<div class="droppable"></div>
<div class="draggable"></div>

.droppable 
    position:relative;
    background:green;
    height:200px;
    width:200px;
    border-radius: 50%;

.draggable 
    background:black;
    height: 25px;
    width: 25px;

.touched 
    background:red;


$('.draggable').draggable();
$('.droppable').droppable(
    tolerance: 'touch',
    over: function () 
        $(this).addClass('touched');
    
);

Clip-path Example

<svg  >
    <clipPath id="clipping">
        <circle cx="100" cy="100" r="100" />
    </clipPath>
</svg>

.droppable 
    position:relative;
    background:green;
    width:200px;
    height:200px;
    clip-path: url(#clipping);

我已经翻阅了 Draggable 和 Droppable 的 API 文档，并且我已经搜索了其他方法来创建圆形/圆形元素，因此是剪辑路径，但还没有想出一个解决方法。

有没有办法让圆形元素像圆形元素一样可拖动和放置？

【参考方案1】：

这是一种可以通过一些额外的 JS 来解决的方法：

$('.draggable').draggable(
   drag: function (aEvent, aUi) 

      $(".droppable").each(function() 

         var myX = aUi.offset.left;
         var myY = aUi.offset.top;

         var myR = $(this).outerWidth() / 2;
         var myCX = $(this).offset().left + myR;
         var myCY = $(this).offset().top + myR;

         if (checkIntersection(myX, myY, myCX, myCY, myR))
         
             $(this).addClass('touched');
         
     );
       
);
$('.droppable').droppable(
   tolerance: 'touch'
);

function checkIntersection(aX, aY, aCX, aCY, aR) 
   return (Math.pow(aX - aCX, 2) + Math.pow(aY - aCY, 2) < Math.pow(aR, 2));

这就是我所做的：

我将函数移至 draggable 的 drag 事件，因为它会被一遍又一遍地调用，因此我们可以不断检查我们现在是否在圈子中。

有一个.each() 循环，因为您现在必须依次检查每个droppable。

我正在检查 draggable 的 x 和 y 坐标是否与 droppable 重叠。这是在函数checkIntersection 中完成的。有关所使用算法的完整说明，请参阅Equation for testing if a point is inside a circle。

请注意，现在我只检查与小正方形的一个角的交点，您必须对所有角都执行此操作，才能完全精确。

这里是小提琴：http://jsfiddle.net/V3Hkg/2/

【讨论】：

这看起来很有希望你能添加一些解释和相关文档吗？

添加了更多数据。希望对您有所帮助。

如果可拖动对象也是圆形的，这似乎会变得更加复杂

也有点担心使用拖拽功能的潜在开销

@apaul34208 关于圆形可拖动，请参阅***.com/questions/481144/…。就效率而言。您必须对此进行测试，但无论是 jQuery 还是您，都必须在某个地方完成数学运算。

【参考方案2】：

这是因为 jQuery 通过元素的边界框来定义可拖动/可放置区域，而不是 CSS 中定义的视觉外观。默认情况下它不知道此信息。看看这个名为Hover and Click Trigger for Circular Elements with jQuery 的教程。也许它会让您深入了解如何将拖放事件仅绑定到圆形区域。

【讨论】：

您提到 jQuery 只“知道”边界框。如果一些clip-pathed 元素也有一个-webkit-shape-outside 声明，我理解它负责设置边界框，那会有帮助吗？