blocks|key|1086032|text|我相信这是最简单的方法：https://plugins.jquery.com/overlaps/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1086033|下面是另一个德语版本：http://www.48design.de/news/2009/11/20/kollisionsabfrage-per-jquery-plugin-update-v11-8/|1086034|我会试一试。|1086035|-更新--|1086036|我现在真的不能花任何时间在这个问题上，但当我回到家时，如果除了你没有人接，我可以这样做：|1086037|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%2Bwidth+ever+overlaps
++++++++++++++++//the+offset%2Bwidth+of+the+2nd
++++++++++++//Fourth+would+be,+if+so,+do+X+or+set+a+class...
++++++++},10);|code-block|syntax|javascript|1086038|entityMap|0|LINK|mutability|MUTABLE|url|https://plugins.jquery.com/overlaps/|1|http://www.48design.de/news/2009/11/20/kollisionsabfrage-per-jquery-plugin-update-v11-8/^0|C|10|0|0|B|2G|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|F|3|G|5|6|7|18|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|19|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1A|8|@]|9|@]|C|$]]|$1|L|3|M|5|N|7|1B|8|@]|9|@]|C|$O|P]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]]]

I believe this is the easiest way:
<a href="https://plugins.jquery.com/overlaps/" rel="nofollow noreferrer">https://plugins.jquery.com/overlaps/</a>
Here is another one, in German:
<a href="http://www.48design.de/news/2009/11/20/kollisionsabfrage-per-jquery-plugin-update-v11-8/" rel="nofollow noreferrer">http://www.48design.de/news/2009/11/20/kollisionsabfrage-per-jquery-plugin-update-v11-8/</a>
I'd give those a try.
--UPDATE--
I can't really spend anytime on it right now, but i can when i get home if no one answers but you;d do something like:
<pre><code>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);
</code></pre>

blocks|key|871340|text|在这方面有点晚了，但我想你可以使用我在遇到类似情况时尝试的这种方法。这样做的好处是不需要额外的插件或脚本，也不需要在其中引入对性能要求很高的轮询。这项技术使用了Jquery的droppable必须提供的内置方法和事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|871341|好了，说得够多了，下面是解决方案的技巧:假设你有两个元素(在我的例子中是图像)，你不想让它们重叠，或者不想在它们重叠时检测到它们，让这两个元素成为一个可丢弃的元素，并让它们相互“接受”：|871342|$([div1,+div2]).droppable(CONFIG_COLLISSION_PREVENTION_DROPPABLE);|code-block|syntax|javascript|871343|'CONFIG_COLLISSION_PREVENTION_DROPPABLE‘看起来像这样：|871344|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+%2B+"px",
++++++++++++left:+originatingOffset.left+%2B+"px"
++++++++},+300);
+++++}
}|871345|'activate‘和'drop’处理程序引用"droppable“插件的'dropactivate‘和'drop’事件|871346|这里，关键是'drop‘回调。每当这两个元素中的任何一个重叠并且它们被放在彼此上时，就会调用“drop”。这是检测和采取操作的地方，可能是发送自定义事件或调用其他操作(我在这里选择将重叠元素的位置恢复到拖动开始时的初始位置，这是在“激活”回调中捕获的)。|871347|就这样。没有轮询，没有插件，只有内置的事件。|871348|好吧，可以对其进行其他优化/扩展，这只是我脑海中出现的第一个有效的方法:)|871349|您还可以使用“dropover”和“dropout”事件向用户发送信号并创建视觉反馈，告诉用户两个元素重叠，而它们可能仍在移动。|871350|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);
++++}
});|871351|希望这能有所帮助！|871352|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1A|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1B|8|@]|9|@]|A|$]]|$1|W|3|X|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|Y|3|Z|5|6|7|1D|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|11|$]]

Its a little late on this but I guess you could use this approach that I tried when I was faced with the similar situation. The advantage here is that there are no additional plugin, or scripts involved and neither do you have to introduce performance hungry polling into it.
This technique uses the the built-in methods and events that Jquery's droppable has to offer.

Ok, enough said, here's the solution technique:
Say if you have two elements (images in my case) and you don't want them to overlap or detect when they do, make the two elements a droppable and make them to 'accept' each other:

<pre><code>$([div1, div2]).droppable(CONFIG_COLLISSION_PREVENTION_DROPPABLE);
</code></pre>

The 'CONFIG_COLLISSION_PREVENTION_DROPPABLE' looks like this:

<pre><code>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);
 }
}
</code></pre>

The 'activate' and 'drop' handlers refer to the 'dropactivate' and 'drop' events of "droppable" plugin

Here, the key is the 'drop' callback. Whenever any of the two elements overlap and they are dropped over each other, the 'drop' will be called. This is the place to detect and take actions, may be sending out custom events or calling other actions (I here chose to revert the overlapping element's positions to the initial position when the drag started, which was captured in 'activate' callback).

That's it. No polling, no plugins, just the built-in events.

Well, there can be other optimizations/extensions done to it, this was simply the first shot out of my head that worked :)

You can also use the 'dropover' and 'dropout' events to signal and create a visual feedback to the user that two elements are overlapping, while they may be still on the move.

<pre><code>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);
 }
});
</code></pre>

Hope this helps!

blocks|key|871395|text|我自己遇到了这个泛化的问题，所以(完全公开)我为它做了一个插件。对于静态对象的简单碰撞查询，请尝试执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|871396|http://sourceforge.net/projects/jquerycollision/|offset|length|871397|这使您可以获得重叠碰撞框的列表(如果没有碰撞，则为无)：|871398|hits+=+$("#collider").collision(".obstacles");|style|CODE|871399|或者，要在“拖动”过程中获得碰撞事件，请使用以下命令：|871400|http://sourceforge.net/apps/mediawiki/jquidragcollide/?source=navbar#collision|871401|这给了你一个要连接的“碰撞”事件。(或“突出”事件，以查看某个div是否会转义当前包含它的另一个div。)|871402|$(draggable).bind(+
+++"collision",
+++function(event,ui)+{
++++++...
+++}
);|code-block|syntax|javascript|871403|如果你在运动过程中检查碰撞，而不是拖动，只需重复调用原始的，它是相当快的。注意:拖拽不能很好地调整大小。|871404|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|1C|0|0|0|0|1A|0|0|0|26|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]]|A|$]]|$1|F|3|G|5|6|7|1B|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1C|8|@$D|1D|E|1E|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1F|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1G|8|@]|9|@$D|1H|E|1I|1|1J]]|A|$]]|$1|P|3|Q|5|6|7|1K|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1L|8|@]|9|@]|A|$U|V]]|$1|W|3|X|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|C]]|15|$5|11|12|13|A|$14|O]]]]

I ran into this generalized issue myself, so (full disclosure) I made a plugin for it. For simple collision queries about static objects, try this:

<a href="http://sourceforge.net/projects/jquerycollision/" rel="nofollow">http://sourceforge.net/projects/jquerycollision/</a>

Which allows you to get a list of overlapping collision boxes (or none if there's no collision):

<code>hits = $("#collider").collision(".obstacles");</code>

Or to get a collision event during "dragging", use this:

<a href="http://sourceforge.net/apps/mediawiki/jquidragcollide/?source=navbar#collision" rel="nofollow">http://sourceforge.net/apps/mediawiki/jquidragcollide/?source=navbar#collision</a>

Which gives you a "collision" event to connect to. (Or a "protrusion" event, to see if a div escapes another div that currently contains it.)

<pre><code>$(draggable).bind( 
 "collision",
 function(event,ui) {
 ...
 }
);
</code></pre>

If you are checking collisions during motion other than dragging, just call the original repeatedly, it's pretty quick. Note: the dragging one doesn't play nicely with resizing.

blocks|key|1086224|text|编辑:我在我的网站上写了一篇博文。这里有它的链接。http://area36.nl/2014/12/creating-your-own-collision-detection-function-in-javascript/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1086225|我也有同样的问题，但幸亏有了奥斯卡·龙生的回答，我才有了一个可以工作的函数。我使用Jquery来简化编码，因为我很懒;p。我把这个函数放在另一个每秒都会触发的函数中，所以请记住这一点。|1086226|function+collidesWith+(element1,+element2)+{
++++var+Element1+=+{};
++++var+Element2+=+{};

++++Element1.top+=+$(element1).offset().top;
++++Element1.left+=+$(element1).offset().left;
++++Element1.right+=+Number($(element1).offset().left)+%2B+Number($(element1).width());
++++Element1.bottom+=+Number($(element1).offset().top)+%2B+Number($(element1).height());

++++Element2.top+=+$(element2).offset().top;
++++Element2.left+=+$(element2).offset().left;
++++Element2.right+=+Number($(element2).offset().left)+%2B+Number($(element2).width());
++++Element2.bottom+=+Number($(element2).offset().top)+%2B+Number($(element2).height());

++++if+(Element1.right+>+Element2.left+&&+Element1.left+<+Element2.right+&&+Element1.top+<+Element2.bottom+&&+Element1.bottom+>+Element2.top)+{
++++++++//+Do+your+stuff+here
++++}
}|code-block|syntax|javascript|1086227|它所做的基本上是获取element1的所有值，然后获取element2的所有值。然后在一些计算的帮助下，它计算出所有的值。然后在if语句中，将element1的平方与element2的平方进行比较。如果element1的值在element2的左、右、上和下值之间。如果为真，则执行底部的代码。|style|CODE|1086228|entityMap|0|LINK|mutability|MUTABLE|url|http://area36.nl/2014/12/creating-your-own-collision-detection-function-in-javascript/^0|P|2E|0|0|0|0|A|8|R|8|1S|2|1Z|8|2B|8|2T|8|34|8|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@$A|13|B|14|M|N]|$A|15|B|16|M|N]|$A|17|B|18|M|N]|$A|19|B|1A|M|N]|$A|1B|B|1C|M|N]|$A|1D|B|1E|M|N]|$A|1F|B|1G|M|N]]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

EDIT: I have written a blog post on my website. Here a link to it.
<a href="http://area36.nl/2014/12/creating-your-own-collision-detection-function-in-javascript/" rel="nofollow">http://area36.nl/2014/12/creating-your-own-collision-detection-function-in-javascript/</a>

Well I had the same problem but thanks to the answer of Oscar Godson I got a function that works. I used Jquery for easy coding and because i'm lazy ;p. I put the function in a other function that is fired every second so keep that in mind.

<pre><code>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 &gt; Element2.left &amp;&amp; Element1.left &lt; Element2.right &amp;&amp; Element1.top &lt; Element2.bottom &amp;&amp; Element1.bottom &gt; Element2.top) {
 // Do your stuff here
 }
}
</code></pre>

What it does is basically it gets all the values of <code>element1</code> and then get all the values of <code>element2</code>. Then with the help of some calculations it figures out all the values. Then in the <code>if</code> statement it compares the square of <code>element1</code> to the square of <code>element2</code>. If the values of <code>element1</code> are between the left, right, top and bottom values of <code>element2</code>. If that is true the code in the bottom is executed.

blocks|key|871523|text|帖子太旧了，也许对某人有帮助……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|871524|function+CheckDiv()
{
var+ediv1+=+document.getElementById('DIV1');
var+ediv2+=+document.getElementById('DIV2');

+ediv1.top+=+$(ediv1).offset().top;
+ediv1.left+=+$(ediv1).offset().left;
+ediv1.right+=+Number($(ediv1).offset().left)+%2B+Number($(ediv1).width());
+ediv1.bottom+=+Number($(ediv1).offset().top)+%2B+Number($(ediv1).height());

+ediv2.top+=+$(ediv2).offset().top;
+ediv2.left+=+$(ediv2).offset().left;
+ediv2.right+=+Number($(ediv2).offset().left)+%2B+Number($(ediv2).width());
+ediv2.bottom+=+Number($(ediv2).offset().top)+%2B+Number($(ediv2).height());

if+(ediv1.right+>+ediv2.left+&&+ediv1.left+<+ediv2.right+&&+ediv1.top+<+ediv2.bottom+&&+ediv1.bottom+>+ediv2.top)
+{
alert("hi");
}

if+(ediv1.left+>+ediv2.left+&&+ediv1.top+>+ediv2.top+&&+ediv1.right+<+ediv2.right+&&+ediv1.bottom+<+ediv2.bottom)
+{
alert("hello");
++++}
}|code-block|syntax|javascript|871525|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Post is old, May be it help someone...

<pre><code>function CheckDiv()
{
var ediv1 = document.getElementById('DIV1');
var ediv2 = document.getElementById('DIV2');

 ediv1.top = $(ediv1).offset().top;
 ediv1.left = $(ediv1).offset().left;
 ediv1.right = Number($(ediv1).offset().left) + Number($(ediv1).width());
 ediv1.bottom = Number($(ediv1).offset().top) + Number($(ediv1).height());

 ediv2.top = $(ediv2).offset().top;
 ediv2.left = $(ediv2).offset().left;
 ediv2.right = Number($(ediv2).offset().left) + Number($(ediv2).width());
 ediv2.bottom = Number($(ediv2).offset().top) + Number($(ediv2).height());

if (ediv1.right &gt; ediv2.left &amp;&amp; ediv1.left &lt; ediv2.right &amp;&amp; ediv1.top &lt; ediv2.bottom &amp;&amp; ediv1.bottom &gt; ediv2.top)
 {
alert("hi");
}

if (ediv1.left &gt; ediv2.left &amp;&amp; ediv1.top &gt; ediv2.top &amp;&amp; ediv1.right &lt; ediv2.right &amp;&amp; ediv1.bottom &lt; ediv2.bottom)
 {
alert("hello");
 }
}
</code></pre>

blocks|key|871548|text|您可以使用getBoundingClientRect()来完成此操作|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|871549|function+isOverlapping(div1,+div2){
++++const+div1+=+div1.getBoundingClientRect();
++++const+div2+=+div2.getBoundingClientRect();
++++return+(div1.right+>+div2.left+&&+
++++++++++++div1.left+<+div2.right+&&+
++++++++++++div1.bottom+>+div2.top+&&+
++++++++++++div1.top+<+div2.bottom)
}|code-block|syntax|javascript|871550|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect^0|5|N|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

You can do this using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect" rel="nofollow noreferrer">getBoundingClientRect()</a>

<pre><code>function isOverlapping(div1, div2){
 const div1 = div1.getBoundingClientRect();
 const div2 = div2.getBoundingClientRect();
 return (div1.right &gt; div2.left &amp;&amp; 
 div1.left &lt; div2.right &amp;&amp; 
 div1.bottom &gt; div2.top &amp;&amp; 
 div1.top &lt; div2.bottom)
}
</code></pre>

How to detect if two <code>&lt;div&gt;</code> elements have collided?

The two divs are simple coloured boxes travelling perpendicular to each other, so no complicated shapes or angles.

jQuery/JavaScript collision detection

如何检测两个<div>元素是否发生冲突？这两个div是简单的彩色盒子，彼此垂直移动，所以没有复杂的形状或角度。

问jQuery/JavaScript冲突检测
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery/JavaScript冲突检测EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery/JavaScript冲突检测
EN