[Interest] How to implement draggables with multiple hot spots

Federico Ferri federico.ferri.it at gmail.com
Tue Sep 21 14:18:36 CEST 2021


I was playing with MouseArea / Drag / DropArea wondering how to implement
draggable items with multiple hotspots, like in the following image:

https://i.stack.imgur.com/NFg7u.gif

i.e. the solid red rectangle (child of the gray draggable item) can only be
dropped onto the red outlined rectangle, and similarly for the blue
rectangle. Note that the above animation shows a non-working
implementation, because my approach was simply to change the hotspot to
match red rectangle ("redHotSpot") center with respect to the draggable
item ("movable"), i.e.:=

Component.onCompleted: {
    Drag.hotSpot = movable.mapFromItem(redHotSpot, redHotSpot.width /
2, redHotSpot.height / 2)
}

I tried other approaches, such as enabling drag also on the red/blue solid
rects, but didn't work.

A workaround would be to translate each DropArea by the inverse of the
transform of the colored solid rect with respect to its parent item (while
leaving the outlined rect in the correct place), but this would only work
if there is only one type of draggable item. (suppose different types of
draggable items exist, e.g. one with yellow hotspot on top and red hotspot
on the right, blue on bottom, and other types... like a jigsaw puzzle)

Any ideas?

I asked this question also on SO, where you can find complete code for my
implementation:
https://stackoverflow.com/questions/69175796/draggable-item-with-multiple-hotspots

Cheers,
Federico Ferri
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20210921/9ef5d18b/attachment.html>


More information about the Interest mailing list