添加页面加载时的preventCollision和障碍选项

Question

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

和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上添加一个“放置”的类，就像这样：