Tutorial for drag and drop

Steve Linn shared this question 5 years ago
Answered

Is there a tutorial to create drag and drop functionality


I found the events drag start...


just need to know how to make it work

Comments (5)

photo
1

Hi Steve,


You can find the tutorials here:http://www.justinmind.com/prototyper/...

photo
1

Good Stuff Victor


how would you suggest that I change the state of the object I am dragging?


For example, I want to drag a green rectangle on the page, when it is dropped I want the green rectangle to have a text box open on it.


any suggestions?

photo
1

Hi Steve,


Draw a dynamic panel. Create 2 panels. On the first panel just put a label that says 'drop here'. On the second panel, draw a text box.


Now just add 'on Drag' event to the green rectangle. On the 'on Drag Stop' event meanwhile, you should activate the panel 2 (Make sure that on the 'When drop on:" option, you choose the dynamic panel). Also in this event, you should hide the green rectangle.


Justinmind Support Team

photo
1

That works, except that the text box is in the original place. I want the text box to move with the green rectangle


I created a dynamic panel with 2 panels


panel 1 - placed green rectangle


panel 2 - placed text box


actions


Green rectangle - on drag (move with cursor)


Green rectangle - on drag stop - show panel 2


what did I miss?

photo
1

Hey Steve,


I have a much clearer sense of what you want now.


Drop a text box widget into the canvas, change its background color to green. Note that In the properties tab you can change the 'Type' to 'textarea'.


Here are the events you should add.


1. on Page Load -> disable the text box (it's in Enable / Disable input)


2. on Drag -> move -> with cursor -> both axis


3. on Drag Stop -> change background back to white (it's in Change Style), enable the text box (resize the text box if you want)


Tip: You can add an action to the same event by clicking the drop down button next to 'do' in the events tab.