Draggable hitTest ordered by overlapping area

[gosu]

Hey, I am using Draggable with hitTest() to determine possible drop spots.

I needed more advanced solution to get the drop spots ordered by percent covered (if draggable object is dropped on 2 or more droppable spots - I needed the one which has the most overlap area covered). Otherwise you end up with let's say 1 draggable element being dropped on 2 possible droppable elements (both having the minimum threshold), it won't matter if you cover one of the elements waaaay more than the other.

 

For this I modified Draggable.js

if (isRatio) {
        threshold *= 0.01;
        area = overlap.width * overlap.height;
        // edit here
        return [(area >= r1.width * r1.height * threshold || area >= r2.width * r2.height * threshold), area];
}
return (overlap.width > threshold && overlap.height > threshold);

 and onDragEnd: 

lastOverlapScore = 0; 
var highestScoreObject = null;

$.each(droppables, function (i, obj) {
    var overlap = draggable.hitTest(obj, '25%'); // some threshold

    if (Array.isArray(overlap) && overlap[0] === true && lastOverlapScore < overlap[1]) {
        lastOverlapScore = overlap[1];  
        var highestScoreObject = obj;
        
    }

});

// highestScoreObject is the element with highest coverage area

This may help someone looking for similar result or may be in use if you decide to add way to get the score.

It would be less hacky solution of I could get the area from Draggable without having to modify it, but though I'm happy it works.

 

[Crtl-Alt-Delete]

Hi there,

 

 

Did u find any better apporch to do this, i am stuck on similar situation as well.

 

thanks