添加 preventCollision 和 obstacle 选项，当页面加载时

Question

这是post：

以及 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');
  }
});

现在我可以将 'dragged' div 拖到 'undragged' div 上吗？

Answer 1

解决方法很简单。只需要在每个 div 中添加一个 class "placed"，像这样：

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

添加 preventCollision 和 obstacle 选项，当页面加载时

Add preventCollision and obstacle option, when page load

jquery

onload

document-ready