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

所属分类：网页特效-实用工具 2023-10-26 02:36:32

7.4K 0 查看评论 (0)

查看演示登录后下载 温馨提示
登录会员即可享受免费下载我要建站

资源描述：一款拖拽重叠交错触发插件，当一个可移动的DIV区块拖放到另一个DIV区块上时，触发的多种不同的事件。含：重叠次数统计、拖拽物体是否已全部重叠、拖放后回到原位

jquery拖动DIV区块判断是否跟其它区块重叠触发事件插件（共2个文件）

src
- collidify.js

index.html

使用方法

code
source

$('.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"
})

$('.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"
})

站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服