I am using:
jquery-1.6.2
jquery-ui-1.8.16
collision 1.0.1
…to build a web-based block painting application. I have a table grid which has selectable cells. Above that layer are the ‘marquees’. When a marquee is moved or resized, I wish the overlapping cells in the table below to have special classes applied to them so I started using collision 1.0.1.
It seemed to have exactly the desired effect, however when you drag a marquee and THEN resize it – the cells below no longer reflect collisions from the marquee above until you drag the marquee again. If you create a new marquee and just resize it, the the collisions are calculated accurately, it only goes wrong after a drag.
There is a demo at http://accessibledesign.net/block_painter/client/ (just drag a marquee on the screen)
Cells that are yellow reflect collision with the marquee above.
I have done extensive testing and can confirm that the resizable marquees themselves have all the correct properties, the fault seems to lie with the collision function:
$("#grid td.ui-selected").removeClass("ui-selected");
hits = DATA.elems.curMarquee.collision($("#grid td.col"))
hits.addClass("ui-selected");
This code is run on ‘stop’ of resizable or draggable – and is triggered at the correct time.
This is a bug in the
jquery-ui-draggable-collisionmodule, actually. Or more specifically, it was not designed to handle "resizeable" yet – that was going to be in a future version. If you don’t need the draggable-collision stuff, removing that should fix the issue.However, if you do need it, there is a workaround for now. Just before calling
$("#target").collision(".obstacles"), do:And this will delete all the internal caching it does, so that it recalculates the collision from scratch, rather than using the previous version that was not yet updated.