如何检测两个<div>
元素是否发生冲突?
这两个div是简单的彩色盒子,彼此垂直移动,所以没有复杂的形状或角度。
发布于 2010-11-20 06:45:06
我相信这是最简单的方法:https://plugins.jquery.com/overlaps/
下面是另一个德语版本:http://www.48design.de/news/2009/11/20/kollisionsabfrage-per-jquery-plugin-update-v11-8/
我会试一试。
-更新--
我现在真的不能花任何时间在这个问题上,但当我回到家时,如果除了你没有人接,我可以这样做:
setInterval(function(){
//First step would be to get the offset of item 1 and item 2
//Second would be to get the width of each
//Third would be to check if the offset+width ever overlaps
//the offset+width of the 2nd
//Fourth would be, if so, do X or set a class...
},10);
发布于 2012-04-01 18:23:41
在这方面有点晚了,但我想你可以使用我在遇到类似情况时尝试的这种方法。这样做的好处是不需要额外的插件或脚本,也不需要在其中引入对性能要求很高的轮询。这项技术使用了Jquery的droppable必须提供的内置方法和事件。
好了,说得够多了,下面是解决方案的技巧:假设你有两个元素(在我的例子中是图像),你不想让它们重叠,或者不想在它们重叠时检测到它们,让这两个元素成为一个可丢弃的元素,并让它们相互“接受”:
$([div1, div2]).droppable(CONFIG_COLLISSION_PREVENTION_DROPPABLE);
'CONFIG_COLLISSION_PREVENTION_DROPPABLE‘看起来像这样:
var originatingOffset = null;
CONFIG_COLLISSION_PREVENTION_DROPPABLE = {
tolerance: "touch",
activate : function (event, ui) {
// note the initial position/offset when drag starts
// will be usedful in drop handler to check if the move
// occurred and in cae overlap occurred, restore the original positions.
originatingOffset = ui.offset;
},
drop : function (event, ui) {
// If this callback gets invoked, the overlap has occurred.
// Use this method to either generate a custom event etc.
// Here, i used it to nullify the move and resetting the dragged element's
// position back to it's original position/offset
// (which was captured in the 'activate' handler)
$(ui.draggable).animate({
top: originatingOffset.top + "px",
left: originatingOffset.left + "px"
}, 300);
}
}
'activate‘和'drop’处理程序引用"droppable“插件的'dropactivate‘和'drop’事件
这里,关键是'drop‘回调。每当这两个元素中的任何一个重叠并且它们被放在彼此上时,就会调用“drop”。这是检测和采取操作的地方,可能是发送自定义事件或调用其他操作(我在这里选择将重叠元素的位置恢复到拖动开始时的初始位置,这是在“激活”回调中捕获的)。
就这样。没有轮询,没有插件,只有内置的事件。
好吧,可以对其进行其他优化/扩展,这只是我脑海中出现的第一个有效的方法:)
您还可以使用“dropover”和“dropout”事件向用户发送信号并创建视觉反馈,告诉用户两个元素重叠,而它们可能仍在移动。
var CLASS_INVALID = "invalid";
// .invalid { border: 1px solid red; }
...
$.extend(CONFIG_COLLISSION_PREVENTION_DROPPABLE, {
over : function (event, ui) {
// When an element is over another, it gets detected here;
// while it may still be moved.
// the draggable element becomes 'invalid' and so apply the class here
$(ui.draggable).addClass(CLASS_INVALID);
},
out : function(event, ui) {
// the element has exited the overlapped droppable now
// So element is valid now and so remove the invalid class from it
$(ui.draggable).removeClass(CLASS_INVALID);
}
});
希望这能有所帮助!
发布于 2014-04-28 19:32:03
编辑:我在我的网站上写了一篇博文。这里有它的链接。http://area36.nl/2014/12/creating-your-own-collision-detection-function-in-javascript/
我也有同样的问题,但幸亏有了奥斯卡·龙生的回答,我才有了一个可以工作的函数。我使用Jquery来简化编码,因为我很懒;p。我把这个函数放在另一个每秒都会触发的函数中,所以请记住这一点。
function collidesWith (element1, element2) {
var Element1 = {};
var Element2 = {};
Element1.top = $(element1).offset().top;
Element1.left = $(element1).offset().left;
Element1.right = Number($(element1).offset().left) + Number($(element1).width());
Element1.bottom = Number($(element1).offset().top) + Number($(element1).height());
Element2.top = $(element2).offset().top;
Element2.left = $(element2).offset().left;
Element2.right = Number($(element2).offset().left) + Number($(element2).width());
Element2.bottom = Number($(element2).offset().top) + Number($(element2).height());
if (Element1.right > Element2.left && Element1.left < Element2.right && Element1.top < Element2.bottom && Element1.bottom > Element2.top) {
// Do your stuff here
}
}
它所做的基本上是获取element1
的所有值,然后获取element2
的所有值。然后在一些计算的帮助下,它计算出所有的值。然后在if
语句中,将element1
的平方与element2
的平方进行比较。如果element1
的值在element2
的左、右、上和下值之间。如果为真,则执行底部的代码。
https://stackoverflow.com/questions/4230029
复制相似问题