jqueryのdraggableでドラッグしたときに重ならないようにしたい

前提・実現したいこと

jqueryでドラッグを可能にした要素をボタンを使って呼び出します。
そして、決めた範囲内のみを移動可能にしたのですが要素同士が
重なってしまいます。
この時の重なりをなくしたいですが方法がわかりません

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
6
7  <style>
8  #diagramContainer {
9    width:402px; height: 402px;
10    border: 1px solid gray;
11    background-color : white;
12  }
13  /* 生成枠のもろもろ */
14  .div_blue {
15    position: absolute;
16    height: 50px; width: 50px;
17    /* background-color: #C0C0C0; */
18    border: 1px solid blue;
19  }
20  .div_green {
21    position: absolute;
22    height: 50px; width: 50px;
23    /* background-color: #C0C0C0; */
24    border: 1px solid green;
25  }
26  .div_red {
27    position: absolute;
28    height: 50px; width: 50px;
29    /* background-color: #C0C0C0; */
30    border: 1px solid red;
31  }
32  </style>
33
34  //jqueryの読み込み
35  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
36  <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
37  <script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
38  <script>
39
40
41  var count=0;
42  function mksqu(obj){
43    var name = obj.getAttribute("Id");
44    //作る<div>の中身
45    var are =  "<div id=\"div_"+ name + "_" + count + "\" class=\"div_"+ name + "\" style=\"left:9px; top:35px;\"></div>";
46
47    //areにdraggableとresizeableの付け足す
48    are = are +"<script> $(function() { $(\"#div_" + name  + "_" + count + "\").resizable({ resize : function(event, ui) {jsPlumb.repaint(ui.helper);},handles: \"all\"}); jsPlumb.ready(function() { jsPlumb.draggable(\"div_" + name + "_" + count + "\", {containment:\"parent\", grid: [ 50, 50]}); }); } );</script>";
49    are = are + "<script>jQuery( function() { jQuery( \"#div_" + name + "_" + count + "\" ) . resizable( { grid: [ 20, 20 ], } ); } );</script>";
50
51    //diagramContainerタグの中にareを入れ込む
52    $("#diagramContainer").append(are);
53    count = count + 1;
54
55  }
56  </script>
57</head>
58<body>
59
60  <input type="button" value="Aを追加" id="blue" onClick="mksqu(this)" />
61  <input type="button" value="Bを追加" id="green" onClick="mksqu(this)" />
62  <input type="button" value="Cを追加" id="red" onClick="mksqu(this)" />
63
64  <div id="diagramContainer" >
65  </div>
66
67</body>
68</html>
69
70<!--
71
72
73-->
74