Add preventCollision and obstacle option, when page load

Question

Here is this post: Prevent draggable divs from being placed near eachother

And the jsFiddle source: https://jsfiddle.net/RichardGouw/h14jcqvx/28/

How can I add obstackle and preventcollision, when the page load? Now these activating only if I drag the div.

// Example

// make pins draggable (using jQuery UI)
$(".pin").draggable({

  // apply collision effect (using collision plugin above)
  obstacle: ".placed",
  preventCollision: true,

  // optional, snap to pixel grid (using jQuery UI)
  grid: [5,5],

  // animate on start of drag (using jQuery UI)
  start: function(e, ui) {
      $(this).removeClass('placed'),
      $('.placed').addClass('boundary');
  },

  // animate on end of drag (using jQuery UI)
  stop: function(e, ui) {
      $(this).addClass('placed'),
      $('.placed').removeClass('boundary');
  }
});

Now can I drag the 'dragged' div on the 'undragged' div.

Answer 1

The solution is simple. Just have to add a class "placed" each div, like this:

<div class= "pin placed"></div>