Jump to content


Draggable hitTest ordered by overlapping area

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.


Link to comment
Share on other sites

  • 10 months later...

Hi there,



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



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.