但是當我觸摸這個div時，它可以落在圓圈外，我嘗試用CSS（Border Radius, Overflow, Clip Path）但沒有任何效果。
在這張圖片中，你可以看到串列掉到了圓圈外，但在div內。
uj5u.com熱心網友回復：
為了實作這一點，你將需要碰撞檢測。你將需要確定一個點是否在圓圈內。
這里可以看到一個例子。http://www.jeffreythompson.org/collision-detection/point-circle.php
我們為什么需要這個？我們可以使用畢達哥拉斯定理來獲得二維空間中兩個物體之間的距離! 在這種情況下，a和b是點與圓心之間的水平和垂直距離。
我在這里使用了Demo。https://jqueryui.com/droppable/我創造了這個例子。
。$(function() {
function getCenter（el） {
return {
x: $(el).position().left ($(el).width() / 2) 。
y: $(el).position().top ($(el).height() /2)
}
}
function getPoints（el） {
return [{
x: $（el）.position().left。
y: $(el).position().top。
}, {
x: $(el).position().left $（el）.width（）。
y: $（el）.position().top.
}, {
x: $(el).position().left,
y: $(el).position().top $（el）.height（）。
}, {
x: $(el).position().left $（el）.width（）。
y: $(el).position().top $(el).height()
}];
}
function pointInsideCircle(pObj, cObj) {
var distX = pObj.x - cObj.x;
var distY = pObj.y - cObj.y。
var distance = Math.sqrt((distX * distX) (distY * distY))
if (distance <= cObj.r) {
return true;
}
return false;
}
$("#draggable"/span>).draggable({
revert: "invalid"。
});
$("#droppable"/span>).droppable({
accept: function(el) {
var points = getPoints（el）。
var circ = getCenter（this）。
circ['r'] = $(this).width() / 2;
return pointInsideCircle(point[0], circ) 。
},
drop: function(event, ui) {
$(this)
.addClass("ui-state-highlight"/span>)
.find("p")
.html("滴！")。
}
});
});#draggable {
width: 100px;
padding: 0.2em;
float: left;
margin: 10px 10px 10px 0;
text-align: center;
}
#droppable {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
border-width: 2px;
border-radius: 50%;
text-align: center;
}< link rel="styleheet" href="/code. jquery.com/ui/1.12.1/themes/base/jquery-ui.css">/span>
<script src="https://code. jquery.com/jquery-1.12.4.js"></script>
<script src="https://code. jquery.com/ui/1.12.1/jquery-ui.js"></script>
< div id="dragable" class="ui-widget-content">
<p>拖動我</p>
</div>/span>
< div id="droppable" class="ui-widget-header">
<p>丟在這里</p>
</div>/span>在這個例子中，它只使用Drag元素的左上角點進行檢測。你可以檢測每個角，如果有任何角在里面，就回傳true。這將類似于touch型別的檢測。
如果左上角不在圓內，Drop 將不接受它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/319901.html
標籤：
上一篇：Mongoose洗掉子檔案