jquery拖动DIV区块判断是否跟其它区块重叠触发事件插件

使用方法

$('.detect-draggable').collidify({
  collides: [ $('.detect-obstacle')],
  onCollideEnter: function() {
      $('.detect-text').html("Collision!")
  },
  onCollideLeave: function() {
      $('.detect-text').html("No more Collision!")
  }
}, {
  scroll: false,
  containment: "#features-detect"
})
$('.inside-obstacle').height("60%");
  $('.inside-draggable').collidify({
      collides: [ {
          element: $('.inside-obstacle'),
          type: "inside"
      } ],
      onCollideEnter: function() { //When Collision Detected:
          $('.inside-text').html("Collision!")
      },
      onCollideLeave: function() { //When No More Collision:
          $('.inside-text').html("No more Collision!")
      }
  }, {
      scroll: false,
      containment: "#features-inside"
  })
$('.revert-draggable').collidify({
  revert: [ $('.revert-obstacle') ],
  collides: [
      $('.revert-obstacle')
  ],
  onCollideEnter: function() { //When Collision Detected:
      $('.revert-text').html("Release!")
  },
  onRevert: function() { //When No More Collision:
      $('.revert-text').html("Drag inside me and Release!")
  },
  onCollideLeave: function() {
      $('.revert-text').html("Drag inside me and Release!")
  }

}, {
  scroll: false,
  containment: "#features-revert"
})
$('.drag-draggable').collidify({
  collides: [ $('.drag-obstacle')],
  onCollide: function() {
      let count = parseInt($('.drag-text').html());
      $('.drag-text').html(count + 1)
  }
}, {
  scroll: false,
  containment: "#features-drag"
})
$('.multiple-draggable').collidify({
    border: [
        $('.multiple-obstacle'),
        {
            element:$('.multiple-obstacle2'),
            type: "enter",
            borderStyle: "3px solid green"
        }
    ],
    revert: [
        $('.multiple-obstacle'),
        $('.multiple-obstacle2')
    ],
    borderStyle: "2px dashed blue"
}, {
    containment: "#features-multiple"
})