title: HTML5 Circle Prevent Drag Outside Canvas and prevent collision
body: <p>I have HTML 5 circle drag and drop example,</p>
  
  <p><a href="http://jsfiddle.net/eGjak/503/" rel="nofollow">http://jsfiddle.net/eGjak/503/</a></p>
  
  <p>i want to follow things</p>
  
  <ol>
  <li><p>prevent drag circles outside of the canvas</p></li>
  <li><p>hide lines over the circles</p></li>
  <li><p>prevent drag over another circle</p></li>
  </ol>
  
  <p>i play with some codes but no luck there. can anyone please help me, by logic or some helpful resource</p>