Hi, I am trying to adapt the script posted on here re drag and drop and wondered if anyone knows how to add a reset button so as to begin again?
D-n-d_test_2.hype.zip (17.8 KB)
The original file is attached here
use hypes API (get/set)
if{…} else{ hypeDocument.setElementProperty(element, 'left', start.left, 0.5, 'easeinout');
hypeDocument.setElementProperty(element, 'top', start.top, 0.5, 'easeinout');}
Thank you for the reply but I’m not sure where this fits in with a reset button
Hi Ian!
Here is an example of a reset button using the example You posted:
Drag’n Drop - D-n-d_ReSet_JHSv1.hype.zip (16.2 KB)
I added code (as shown below in the "if ~ “else” section) to the “intersectTest” function to show (display = “block”) ~ hide (display = “none”) the “Reset” button (“dragResetBtn” id).
The function “resetElement” used by the “Reset” button (mouse click event):
resetDrag = hypeDocument.getElementById('dragCircle');
hypeDocument.setElementProperty(resetDrag, 'left', nX);
hypeDocument.setElementProperty(resetDrag, 'top', nY);
hypeDocument.setElementProperty(resetDrag, 'left', 16, 2.0, 'easeinout');
hypeDocument.setElementProperty(resetDrag, 'top', 16, 2.0, 'easeinout');
hypeDocument.getElementById('feedbackText').innerHTML = 'Drag the circle over the square...';
hypeDocument.getElementById('dragResetBtn').style.display = "none";
In a curious discovery I just made about Hype (v3.6.7 current) - the “left” and “top” properties of an element after a drag ends are NOT registered by Hype for the “left” & “top” of the dragged element - the original position before the drag is what is still registered.
If You simply wanted the “dragCircle” element to jump back to its original starting position all You have to do is set just one property e.g.
hypeDocument.setElementProperty(resetDrag, 'left', 16, 2.0, 'easeinout');
the “top” is automatically placed in the correct position… no other “setElementProperty” code needed… BUT there is no animation - even if it is in the code (as shown).
I do not think that looks as nice as having the “dragCircle” element animate back to its original position which is why the function “resetElement” is written the way it is.
First we have to set the “dragCircle” element to the position registered at the end of the drag (i.e. “nX” & “nY”) - and then set the “dragCircle” element to the its original position of "left & “top” (both = “16”).
Additional Note:
The “nX” & “nY” come from the function “intersectTest” (please see screen shot below):
2 Likes
That’s really helpful Jim, thank you so much. The project I’m working on is complex enough without having to sort out JS!
This is working beautifully Jim, I’ve managed to adapt it for my actual display so I must be learning something!
1 Like