Question

虽然给予div相等的高度和宽度并将边界半径设置为100％会使div“看起来”像一个圆圈，但实际情况是它仍然是伪装的正方形。如何让div成为“真正的”圈子？为了我的目的，我想让物品只能在我创建的圆圈内放置。通过使div看起来像圆圈，物品仍然可以在边缘的圆圈之外放置。

$(".circle").droppable();
$(".drop").draggable({
  containment: "parent"
  });

.circle
{
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 100%;
  display: inline-block;
}
.drop
{
  border: 1px solid black;
  display: inline-block;
}
.drop:hover
{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="circle">
<div class="drop">
  Drop Me<br>
  Outside
</div>
</div>

Answer 1

overflow: hidden;
box-sizing: border-box;
padding: 50px;

对于容器会做的事情:) 或者如果你可以使用flexbox那么

overflow: hidden;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;

使用像这样的svg对象，如评论

中所示

<svg class="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="#FFF" cx="50" cy="50" r="50"/></svg>

Answer 2

我可以建议手动拖动，以防止元素超出圆圈时出现意外行为。添加一些额外的JavaScript。

以下代码只能处理一个角落（左上角）。您可以添加三个条件来处理所有角落。移动一个小圆而不是一个矩形会更好 - 一个圆只有一个条件，矩形有四个。

^(?!.\s)^[A-Za-z0-9-_ ]+$

// radius of a circle
var radius = 100;

$(".circle").droppable();
$(".drop").draggable({
  containment: "parent",
  drag: function( event, ui ) {
    // position of a left top corner of a rectangle with respect 
    // to a center of a circle 
    var x = ui.position.left - radius,
        y = radius - ui.position.top,
        r = Math.sqrt(x*x + y*y);

    // if distance from a center of a circle is greater than radius
    // move it back into the circle
    if (Math.floor(r) > radius) {
        ui.position.top = radius - Math.round(radius * y / r);
        ui.position.left = Math.round(radius * x / r) + radius;
    }
  }
});

.circle
{
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 50%;
  display: inline-block;
}
.drop
{
  border: 1px solid black;
  display: inline-block;
}
.drop:hover
{
  cursor: pointer;
}

UPD。拖动圆圈的示例被视为in another question。

将div的面积减少到一个圆圈？

2 个答案: