Drag and remove an object from a group

Hello.

I have a group as a slider with some elements.
As I drag an element from the group-slider it changes the initial Class.
But as I move the group-slider it also moves the dragged element.

Is there an easy way* to remove the appartenance to that group-slider for the dragged out object?
test slide elements.zip (27.8 KB)

Thank you!

*that can be replicated by a person without JavaScript knowledge

Interesting problem... I don't have a drop-in solution for you since this would be fighting against quite a bit of how it is currently setup and how Hype works. The primary problems you are facing are:

  • Hype has pretty strong assumptions about the parent hierarchy and probably won't like changes on the fly if it needs to use the parent later. I'm pretty sure for dragging it needs to know about the parent.
  • Elements are positioned in such a way that you need to offset them by a their parent positioning if you pop them out.
  • You are using flexible layout, which means that Hype has all kinds of internal notions about positioning.

I think if I were to redo this with the functionality you want, I'd probably not group the elements. Instead, have the arrows individually animate each item that hasn't been dragged out. Loop through each item in a list of IDs. You could use the hypeDocument.getElementProperty() API to get its current position, and then use hypeDocument.setElementProperty() to set it with an offset an animate. If something gets dragged out, remove it from the list of IDs.

2 Likes

Thank you @jonathan!
It's sound so logic and so simple as you explain it :grinning:
Could you please share / create a minimal (!) sample? I will also search the forum with this new info.
:pray:

kind of ...

2 Likes

Thank you, @h_classen!
It is exactly the file that I was trying to replicate and understand as it implies drag and drop and move of a group.

I could not succeed in using it in relation to other objects on the same scene: once the selector is visible it makes an overflow and I am not able to hide it or bring an object over it. It remains always on the top.
And as I wanted to move it (change position in order to be no more visible) the selector dragged all the elements from the screen.

using Max' solution here seems to be possible – of course adapted. kind of a magic trick ...

2 Likes

@h_classen has a point with a "magic trick". At least that how I understand his idea… As Hype doesn't really allow reassigning, why not have the objects twice. One in the slider and once in on the stage (hidden). When you drag one out… on drag end hide it and make the on stage visible after syncing it's position.

1 Like

Thank you again @h_classen, I agree, that Carousel is magic.
As inside of it are symbols, as I drag an element all of them will be moved to that new position.
Since I am not able to know how to use for my case this info:
img
I will think about another workaround or way to do it.

My project implies 30-40 elements per category and I have 10 categories. And the idea of the slider was to allow user to see them and drag them without cover a big part of the screen.

Thank you @MaxZieb.
You guys are awesome! I have no problem in duplicate the objects.

You mean to have all the objects hidden on the screen and as a user drag an element from the slider to make visible the corresponding one on the scene?

yes, doing some swaps on dragend ... like pulling a rabbit out of a top hat :slight_smile:

2 Likes

Ohhh, I see ... But I have always believed that the rabbit get out from the hat... :grinning:
Thank you all!

The duplication method is pretty clever, seems like that is the way you are going :slight_smile:. Let me know if you end up wanting this example still.

1 Like

Hello @jonathan.
I am not sure if you are asking me if I still need an example. If yes, I would be very happy to have it.
As now I am not sure where / how to start...
Thank you!

This is basically what I had in mind:

StopMoving.hype.zip (44.3 KB)

Each emoji gets an extra class called 'unmoved'. If the drag starts, this class is removed.

Pressing the left button calls panEmojiLeft() which calls into panEmoji() using an unlisted 4th argument for 'left' to give the direction to the generic function. The right button does the same, but with 'right' as the argument.

panEmoji() looks at any elements still with the 'unmoved' class, and will offset them by the amount specified in the function with an animation. There's also a little bit of code to make sure some basic boundaries are respected and that you don't click twice immediately.

There's a few downsides to this approach, one of which is you can't use a group with hidden overflow -- the emoji have to be peers. I've instead put some elements over the buttons so it looks like it is getting clipped.

3 Likes

Thank you @Jonathan and thank you @MaxZieb and @h_classen and everybody from this community! :partying_face:
It is perfect and magic and exactly what I need! :pray:
I guess and hope that this file will be useful for many users and projects!

1 Like