Response title
This is preview!
drop-testing overlapping image elements for drag and drop (and what about selection :)
in Using jQuery UI
•
10 years ago
I'm creating a hex terrain editor for an html5 game. I'm avoiding canvas, because I want to take advantage of jqueryui features. I want to support drag&drop from a toolbar onto hex tiles.
The hex tiles are image elements. They are transparent at the corners of the rect. I position the images (using css) so that the hex-tiles are edge-to-edge, so the rectangles containing the hex images *overlap*. Needless to say, this makes things a bit tricky when I want to do drag and drop, because multiple tiles will be activated by a single mouse location (because hit testing is on the overlapping rectangles).
I made a simple hack of drop target detection for droppables. $.ui.intersect uses the tolerance mode for hit detection. I replaced this function with a copy that includes a new toleranceMode that I named 'hexPointer'. This calls a function that does a point-in-poly hit test, based on the containing rectangle. This works like a champ.
// special handling for hexes
case 'hexPointer':
var draggableLeft = ((draggable.positionAbs || draggable.position.absolute).left + (draggable.clickOffset || draggable.offset.click).left),
draggableTop = ((draggable.positionAbs || draggable.position.absolute).top + (draggable.clickOffset || draggable.offset.click).top),
isOver = isHexOver(draggableTop, draggableLeft, t, l, droppable.proportions.height, droppable.proportions.width);
return isOver;
break;
So when I create my droppable I do this:
// each tile in the map is a drop target and can be selected
$('img.board-tile').droppable({ hoverClass: 'selectedHex', tolerance:'hexPointer', drop: mapDrop });
But I'm wondering...is there a better way? Or a cleaner way to accomplish this replacement? And maybe there's an implication that tolerance modes should be a customizable behavior?
I'd like to use a similar idea for selecting, but of course selectable behaves quite differently. I'd need a similar technique with a selection manager that behaved more like the drag and drop manager.
Any ideas and comments appreciated.
Sincerely,
Bill
2