3

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

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

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

边界半径示例

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

剪辑路径示例

<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 文档，并且我已经搜索了其他方法来创建圆形/圆形元素，因此是剪辑路径，但还没有找到解决方法。

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

4

2 回答 2

3

这是一种可以通过一些额外的 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. 我将函数移动到drag事件中，draggable因为它被一遍又一遍地调用，因此我们可以不断检查我们现在是否在圈子中。

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

  3. 我正在检查draggable重叠的 x 和 y 坐标是否与droppable. 这是在函数中完成的checkIntersection。有关所用算法的完整说明，请参见测试点是否在圆内的方程式。

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

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

于 2013-09-07T15:26:28.820 回答
2

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

于 2013-09-07T15:21:50.133 回答