divの範囲を円に縮小しますか？

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; 

事:) を行うだろうかで提案されているように、あなたは、

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を追加してください。

次のコードは、1つのコーナー（左上）を扱うことができます。すべてのコーナーを処理するためにさらに3つの条件を追加できます。矩形ではなく小さな円を移動する方がよいでしょう。円には1つの条件があり、長方形には4つの条件があります。

// 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; 
 
}

<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>

UPD。円をドラッグする例はin another questionと見なされました。