Question

我想在用户拖动鼠标时检测div碰撞。

我有类似

的东西

<div id='drag-item'/>
    <img src='drag' />
</div>
 <img id='img1' src='img1.png'/>
 <img id='img2' src='img21.png'/>
 <img id='img3'  src='img3.png'/>
 <img id='img4'  src='img4.png'/>
 <img id='img5' src='img5.png'/>

  var objects = {
                   'img1': {'offset':330..other property...},
                   'img2': {'offset':-450,other property...},
                   'img3': {'offset' : 100,other property...} ,
                   'img4': {'offset' : 430,other property...},
                   'img5': {'offset' :-260,other property...}
                 }

JS

 $('#drag-item').draggable(
          drag: function(){
                    var p = $('#drag-item').offset();

                    for(var i in objects){
                        var t = $('#' + i).position()
                        var hei = $('#' + i).height() + p.top;

                        if(p.top >= t.top && p.top <= hei ){
                            console.log('hit the object')
                        }
                    }
           }
    )

我想在拖动div时显示'点击对象'并点击其中一个图像，但我似乎无法检测到碰撞。任何人都可以帮我解决这个问题吗？

Answer 1

首先看一下：
Please recommend a JQuery plugin that handles collision detection for draggable elements

但是如果你想自己实现它，你必须查找分离轴定理：
Hyperplane separation theorem

此外，您可以通过以下链接使用Javascript游戏引擎进行jQuery：
Javascript game engine for jQuery

Answer 2

以下是可拖动对象的一些碰撞检测：

$('#drag-item').draggable({
    drag: function (event, ui) {
        var height = ui.helper.height();
        var divs = $('div.img').not($(this).children());

        var pos = ui.position;

        divs.each(function (index, value) {
            var t = $(this).position();
            var hei = $(this).height()

            if (t.top <= pos.top + height ) { // check for top collision
                if (pos.left <= t.left + $(this).width()) { // check for side collision
                    console.log('hit the object');
                }
            }
        });
    }
});

和Demo

如何在我的情况下检测div碰撞？

2 个答案: