Question

我一直试图让jQuery UI的draggable / droppable与圆形元素一起正常工作，但似乎我试过的所有方法都会使元素在视觉上变圆，但它们仍然被视为方块。

我遇到的具体问题是当使用带有border-radius或clip-path的droppable时，draggable可以放在不应该存在的“角落”上......

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

<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和Droppable的API文档，并且我已经搜索了其他方法来创建圆形/圆形元素，因此剪辑路径，但是无法想出一个解决方法。

有没有办法让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));
}

所以这就是我所做的：

我将该功能移至drag的{{1}}事件，因为这会被一遍又一遍地调用，因此我们可以不断检查我们现在是否在圈内。
我们现在必须依次检查每个draggable {/ 1}}循环。
我正在检查.each()的x和y坐标是否与droppable重叠。这是在函数draggable中完成的。有关所用算法的完整说明，请参阅Equation for testing if a point is inside a circle。

作为一个注释，现在我只是检查与小方块的一个角的交叉点，你必须为所有角落做这个，完全精确。

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

Answer 2

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

圆形或圆形可拖动/可放置

2 个答案: