jquery - 圆形或圆形 Draggable/Droppables

Question

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

我遇到的具体问题是，当使用带有边框半径或剪辑路径的可拖动对象时，可拖动对象可能会被放在不应该出现的“Angular 落”上...

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

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 width="0" height="0">
    <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 的 API 文档和 Droppable并且我已经搜索了其他方法来创建圆形/圆形元素，因此 clip-path，但一直无法想出解决方法。

有没有什么方法可以让draggable和droppable像圆形元素一样对待圆形元素？

Answer 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));
}

这就是我所做的:

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

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

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

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

这是 fiddle :http://jsfiddle.net/V3Hkg/2/