防止SVG对象重叠

Question

我目前正在开发一个拖放项目，需要svg形状相互连接但不能通过。我有一个jsfiddle，它使用divs而不是svgs。任何帮助将不胜感激。

JSFIDDLE

HTML

<div id="container">
<div id="square" class="draggable boundaries"></div>
<div id="square" class="draggable boundaries"></div>
<div id="circle" class="draggable boundaries"></div>  
<div id="triangle-up" class="draggable boundaries"></div>  


<svg height="100" width="100" class="draggable boundaries" >

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green"/>
Sorry, your browser does not support inline SVG.  

</svg>   

<svg height="100" width="100" class="draggable boundaries" >
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green"/>
Sorry, your browser does not support inline SVG.  
</svg>   

</div>

JS

$(".draggable").draggable({
obstacle:".boundaries",
preventCollision: true,
containment: "#container",
start: function(event,ui) {
    $(this).removeClass('boundaries');
},
stop: function(event,ui) {
    $(this).addClass('boundaries');
}
 });