我一直试图让jQuery UI的可拖动/可放置(draggable/droppable)与圆形元素正常工作,但似乎所有我尝试的方法都能使元素视觉上变成圆形,但它们仍然被当作正方形处理。
我遇到的具体问题是使用带有border-radius或clip-path的droppable时,可拖动元素可以被放置在不应存在的“角落”上...
为了更好地说明我的问题:
<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将圆形元素视为圆形元素?