圆形可拖拽/放置物品

Question

圆形可拖拽/放置物品

jquerycssjquery-uidraggabledroppable

3

我一直试图让jQuery UI的可拖动/可放置（draggable/droppable）与圆形元素正常工作，但似乎所有我尝试的方法都能使元素视觉上变成圆形，但它们仍然被当作正方形处理。

我遇到的具体问题是使用带有border-radius或clip-path的droppable时，可拖动元素可以被放置在不应存在的“角落”上...

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

Border-radius示例

<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文档，并寻找其他创建圆形/圆角元素的方法，例如clip-path，但没有找到解决方法。

请问是否有办法让draggable和droppable将圆形元素视为圆形元素？

- apaul

2个回答

2

这是因为jQuery通过元素的边界框定义可拖动/可放置区域，而不是CSS中定义的其视觉外观。它默认不知道这些信息。请查看名为使用jQuery悬停和单击触发圆形元素的教程，也许它会让您了解如何将拖放事件绑定到仅限于圆形区域。

- BigMacAttack

你提到jQuery只“知道”边界框。那么，如果一些clip-path元素也有-webkit-shape-outside声明，这是否有帮助？我理解这个声明是负责设置边界框的。 - maxheld

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ced-b · Accepted Answer

以下是一种使用一些额外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/