移动随机div而不重叠

Question

我想在屏幕上移动随机div，就像这个小提琴http://jsfiddle.net/j2PAb/一样。但是希望他们不要叠加。而是像弹球机一样互相反弹。如果有人有任何想法，将不胜感激。

enter code here      
<div id="container">
<div class='a'></div>
<div class='b'></div>
<div class='c'></div>
</div>

$(document).ready(function() {
animateDiv($('.a'));
    animateDiv($('.b'));
     animateDiv($('.c'));

 });

 function makeNewPosition($container) {

// Get viewport dimensions (remove the dimension of the div)
var h = $container.height() - 50;
var w = $container.width() - 50;

var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);

return [nh, nw];

  }

  function animateDiv($target) {
var newq = makeNewPosition($target.parent());
var oldq = $target.offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);

$target.animate({
    top: newq[0],
    left: newq[1]
}, speed, function() {
    animateDiv($target);
});

};

function calcSpeed(prev, next) {

var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);

var greatest = x > y ? x : y;

var speedModifier = 0.1;

var speed = Math.ceil(greatest / speedModifier);

return speed;

  }

div#container {height:500px;width:500px;}

div.a {
width: 50px;
height:50px;
background-color:red;
position:fixed;

}
 div.b {
width: 50px;
height:50px;
background-color:blue;
position:fixed;

}
div.c {
width: 50px;
height:50px;
 background-color:green;
position:fixed;

}