How to drag objects onto an image, with multiple specific drop points?

[kenah]

This is possibly the most basic question a newbie can ask but I've spent a few days (obviously looking in the wrong places) looking for such:

1. My question does not concern the dropping of a file onto an image for the purposes of up/downloading the file or exposing a form;

2. I need to be able to drag objects onto an image as a dropzone - each specific object dragged and dropped on a specific part of the dropzone image.

I've seen examples of objects being dropped onto a logo but I'm not sure where the logo image comes from - possibly the CDN.

It would probably be best explained by (ignoring any GMaps or similar APIs and) visualizing a map whereupon objects (e.g. cities) be dragged onto this image (map) where the supposed cities are supposed to be. 

Would appreciate such as a starting point - to include the image source and affix as the droppable area where the various dropzones can be defined.

Thank you 

[Carl]

Hi and welcome to the GreenSock forums,

 

We have a tool called Draggable which lets you drag things: https://greensock.com/draggable

The things you drag have a hitTest() method which allows you to test if the thing you are dragging is overlapping another thing by a certain amount.

 

Here is a basic demo showing how it works. Drag the colored rectangles over the drop area. If you release over the drop area they will stick, if you release outside the drop area they will go back.

 

See the Pen Pqwxvw by GreenSock (@GreenSock) on CodePen

 

I'd recommend you experiment with the technique and try overlaying some "drop area" elements (with very low opacity) on your map.

 

 

[kenah]

Will do so - thanks so much Carl