在页面加载时添加 preventCollision 和障碍选项答案

【问题标题】：Add preventCollision and obstacle option, when page load在页面加载时添加 preventCollision 和障碍选项
【发布时间】：2019-10-14 19:48:19
【问题描述】：

这是这篇文章： Prevent draggable divs from being placed near eachother

还有 jsFiddle 源码： https://jsfiddle.net/RichardGouw/h14jcqvx/28/

当页面加载时，如何添加 obstackle 和 preventcollision？现在这些只有在我拖动 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 上。

【问题讨论】：

标签： jquery onload document-ready

【解决方案1】：

解决方案很简单。只需添加一个“放置”每个 div 的类，如下所示：

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

【讨论】：