Jump to content

GUI drag drop element, image...


Recommended Posts


Is it possible with BABYLON.GUI to move containers (drag drop).

For example I would like to be able to move an image of a container and add it to another container. (To move an item from an inventory to an actionbar for example)

I would also like to move a rectangle inside the canvas.

Is this something possible now or is this something that can be added? I try to completely rewrite my SDK using BABYLON.GUI instead of appendChild()

Thank you

Link to comment
Share on other sites

Hi Dad.  Sorry to interrupt... but... during drag... would it be OK if dragged item... changed into little abs-position html element?  Then, when dropped... re-creates advancedDynamicTexture (ADT) in new container (placed upon a mesh.material there).

Would that work for you?  During drag, dragged item is "tokenized" into something else... and stays that way until the drop is complete.  *shrug*  kbye again.

Link to comment
Share on other sites

No, I have no PG of that.

I will try to explain better.

You pointer-down on GUI item. When dragging starts...

1. Collect information about dragged item.  Collect enough information to create a NEW item... exactly the same as dragged item.
2. Create absolute positioned html element at mouse pointer, and wire its CSS top/left... to mouse pointerX/Y.  You will drag IT, and not GUI item.
3. Make dragged GUI item invisible.  Don't drag it... just prepare it to be disposed if drop is successful.
4. When user drops the HTML element in the new location/container... RE-CREATE an exact copy of old invisible GUI item... in the new container.
5. Make the new created GUI item visible (it will be, by default). Make it flow/fit into new container properly.  Then dispose old invisible GUI item from old location.
6. Delete HTML token at pointer.  Drop was successful.

See, you never dragged the GUI item.  You faked it.  You showed the user a "token" of the dragged item, but the actual GUI item... is not really dragged.  Just a "token" of it, is dragged.  It is a common practice in many things.  For example, when you drag an image into Wordpad... you don't see the actual image... until the drop is done.  Before the drop, while dragging... it is a white box (a token/proxy), I think.  When dropped... boom, it becomes a picture again.

Sorry. I should learn the correct terminology for these things.  I'm too noob for the things I try to talk about.  :)

Link to comment
Share on other sites

My pleasure.  You don't need to use HTML element for token/proxy.  There are mouse pointer shapes (CSS cursor: stylerule) already designed-for dragging and OK-TO-DROP-HERE... and NO-DROP-ALLOWED-HERE... etc.  Perhaps you could change pointer during drag... indicating that something is being "held".  *shrug*

And... you can use your own image.... for a mouse pointer.  So you could make a pointer that is an image... a hand carrying a mesh in a basket... you know... something to tell the user that an item is being moved.  And you could spray particles from the pointer arrow... when dragging an item.  Pretty.  Pretty ridiculous.  :) 

Using a mesh as a token?  Even an animated one?  Can do... but you can't drag the token onto HTML areas.  Mesh won't travel off-canvas. 

Abs-positioned html can travel anywhere on the page, including atop flash players and Windows Media Player embeds.  (huh?)  :)

I think the "make your own pointer image"-method would work real nice... for your drag system, Dad.  No need for abs-pos html.

Just change pointer to be YOUR pointer image... when dragging something.  :)  You can change to a different pointer-picture... for NO-DROP-ALLOWED-HERE, too.  Pretty easy.

Link to comment
Share on other sites

Wingnut continues a conversation from another thread...  talking about dragging GUI stuff.  Here's my latest failure:


Still testing.

My 'diff' looks good at console, now.  But... button won't update position... when pointer is down. (it seems)

I try lines 60-61... trying to set button dirty, so framework will update.  Nope.

I try 34... no change.

It seems... line 55/56 fails... while button is down.  And it NEEDS to be down... for dragging.  Goofy.

No updating of button.left and button.top... when mouse button pressed.  Crap.  So close.  :) 

Surely Wingnut mistake.  Fun experimenting, though.

I hope I'm not in-the-way, Dad.  Maybe if Wingnut shuddup, DK would talk more, eh?  Sorry.

Link to comment
Share on other sites

Interesting.  Perhaps we are setting .top and .left too fast.  isDirty checker cannot keep-up.  :)

Update: Nope, both isDirty lines aren't needed.  hmm.

Update2: Button seems to think it didn't move, after dropping.  So NEXT drag... snaps to 0,0 again, or something like that.

Update3:  Wingy needs lunch.  Too much playing... forgot to eat.  :)

Link to comment
Share on other sites

I think this is a bug or not. "coordinates" is not updated. Whenever you move a first time, it's ok, but the next time, the center starts, so the button returns to the center.


In this PG, I position the button higher and as one moves it, it returns to the center. It always leaves the center. I do not know why


good meal Wingnut

Link to comment
Share on other sites

Notice how important diff became?  When Deltakosh first used diff (in the drag'n'drop demo), he actually set a precedent (a standard) for all future onPointerMove handlers.

But it actually started centuries ago, in the ancient lands of Differencia... based upon parchments written-by old Differencian scholars.  Their civilization spent MOST of their waking hours... subtracting yesterday from today... trying to determine the diff between the two.

Of course, the Differencian civilization died-out, due to extreme boredom.  Yet, we owe them... for our new, cool, Babylon.GUI drag'n'drop.  :)    Hooray for Differencia!  Long live diff !  heh.   (Geez, my own goofy story nearly bored me to death)  :)

Link to comment
Share on other sites

I made another PG which allows to move a rectangle with a picture inside. Even if you click on the image to move the rectangle, everything is moving inside the rectangle.

This is useful for moving windows with elements inside (window of options, inventory ...)


I therefore use isHitTestVisible = false; On the layers that are in the Control to moved for its events to be taken into account.

In short, a more concrete PG of Drag drop

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...