Добавляйте параметр warnCollision и препятствие при загрузке страницы

Question

Вот этот пост: Предотвращение размещения перетаскиваемых элементов div рядом друг с другом

И источник jsFiddle: https://jsfiddle.net/RichardGouw/h14jcqvx/28/

Как добавить препятствиеи предотвратить столкновение, когда страница загружается? Теперь они активируются только в том случае, если я перетаскиваю 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');
  }
});

Теперь я могу перетащить «перетаскиваемый» div на «недетированный» div.

Answer 1

Решение простое. Просто нужно добавить класс "поместил" каждый div, как это:

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