We're using the Draggable JQuery UI plugin and need to disallow overlapping among our elements. We could write some collision detection ourselves but would prefer to use a tested package. Any suggestions?
我们正在使用Draggable JQuery UI插件,需要禁止在我们的元素之间重叠。我们自己可以写一些碰撞检测,但更喜欢使用经过测试的包。有什么建议么?
5 个解决方案
#1
15
You can try jquery-collision plus jquery-ui-draggable-collision. Full disclosure: I just wrote and released these on sourceforge.
您可以尝试jquery-collision plus jquery-ui-draggable-collision。完全披露:我刚刚在sourceforge上编写并发布了这些内容。
The first allows this:
第一个允许这个:
var hit_list = $("#collider").collision(".obstacle");
which is the list of all ".obstacle" that overlap "#collider".
这是与“#collider”重叠的所有“.obstacle”的列表。
The second allows:
第二个允许:
$("#collider").draggable( { obstacle: ".obstacle" } );
Which gives you (among other things), a "collision" event to bind to:
这给你(除其他外)一个“碰撞”事件绑定到:
$("#collider").bind( "collision", function(event,ui){...} );
And you can even set:
你甚至可以设置:
$("#collider").draggable( { obstacle: ".obstacle", preventCollision: true } );
to prevent "#collider" from ever overlapping any ".obstacle" while dragging.
防止“#collider”在拖动时与任何“.obstacle”重叠。
#2
3
Quick search of jQuery plugins turns up:
快速搜索jQuery插件出现了:
Looks like it's still early, but might be worth checking out.
看起来还早,但可能值得一试。
#3
2
I know this question is quite old, but maybe you will find this useful: our Collision Check Plugin for jQuery.
我知道这个问题很老了,但也许你会觉得这很有用:我们的jQuery碰撞检查插件。
The description is in German, but it should be self-explanatory. You can either use two single elements or even sets of elements and will get back a set of all colliding elements.
描述是德语,但它应该是不言自明的。您可以使用两个单个元素甚至是元素集,并返回一组所有碰撞元素。
#4
1
Google tells me that gameQuery, a JQuery plugin, has a "collision" function:
Google告诉我,gameQuery是一个JQuery插件,具有“碰撞”功能:
http://gamequery.onaluf.org/#manual
Search for the word "collision" on the page above.
在上面的页面中搜索“碰撞”一词。
This google search can give you a couple of other options:
这个谷歌搜索可以给你几个其他选择:
#5
0
Assuming, but I think what you would need can be found here:
假设,但我认为你需要的东西可以在这里找到:
It uses the jQuery famous $.event.special.drag to create de drop event. You can put your own javascript code under the .bind( "drop", function( event ){ the this element inside this function represent the object with the class "drop" you have defined and the event.dragTarget is the object that is being dragged.
它使用jQuery着名的$ .event.special.drag来创建de drop事件。您可以将自己的javascript代码放在.bind(“drop”,function(event){此函数中的this元素表示您已定义的类“drop”的对象,event.dragTarget是正在进行的对象拖累。
More doc at the site linked above. This was what I needed anyway.
上面链接的网站上有更多文档。无论如何,这就是我所需要的。
#1
15
You can try jquery-collision plus jquery-ui-draggable-collision. Full disclosure: I just wrote and released these on sourceforge.
您可以尝试jquery-collision plus jquery-ui-draggable-collision。完全披露:我刚刚在sourceforge上编写并发布了这些内容。
The first allows this:
第一个允许这个:
var hit_list = $("#collider").collision(".obstacle");
which is the list of all ".obstacle" that overlap "#collider".
这是与“#collider”重叠的所有“.obstacle”的列表。
The second allows:
第二个允许:
$("#collider").draggable( { obstacle: ".obstacle" } );
Which gives you (among other things), a "collision" event to bind to:
这给你(除其他外)一个“碰撞”事件绑定到:
$("#collider").bind( "collision", function(event,ui){...} );
And you can even set:
你甚至可以设置:
$("#collider").draggable( { obstacle: ".obstacle", preventCollision: true } );
to prevent "#collider" from ever overlapping any ".obstacle" while dragging.
防止“#collider”在拖动时与任何“.obstacle”重叠。
#2
3
Quick search of jQuery plugins turns up:
快速搜索jQuery插件出现了:
Looks like it's still early, but might be worth checking out.
看起来还早,但可能值得一试。
#3
2
I know this question is quite old, but maybe you will find this useful: our Collision Check Plugin for jQuery.
我知道这个问题很老了,但也许你会觉得这很有用:我们的jQuery碰撞检查插件。
The description is in German, but it should be self-explanatory. You can either use two single elements or even sets of elements and will get back a set of all colliding elements.
描述是德语,但它应该是不言自明的。您可以使用两个单个元素甚至是元素集,并返回一组所有碰撞元素。
#4
1
Google tells me that gameQuery, a JQuery plugin, has a "collision" function:
Google告诉我,gameQuery是一个JQuery插件,具有“碰撞”功能:
http://gamequery.onaluf.org/#manual
Search for the word "collision" on the page above.
在上面的页面中搜索“碰撞”一词。
This google search can give you a couple of other options:
这个谷歌搜索可以给你几个其他选择:
#5
0
Assuming, but I think what you would need can be found here:
假设,但我认为你需要的东西可以在这里找到:
It uses the jQuery famous $.event.special.drag to create de drop event. You can put your own javascript code under the .bind( "drop", function( event ){ the this element inside this function represent the object with the class "drop" you have defined and the event.dragTarget is the object that is being dragged.
它使用jQuery着名的$ .event.special.drag来创建de drop事件。您可以将自己的javascript代码放在.bind(“drop”,function(event){此函数中的this元素表示您已定义的类“drop”的对象,event.dragTarget是正在进行的对象拖累。
More doc at the site linked above. This was what I needed anyway.
上面链接的网站上有更多文档。无论如何,这就是我所需要的。