Revert element to original position

Using JavaScript with Hype
1

hi!
i want an element to revert to original position after dragging. but only using the new API or javascript, no jquery.
and no id or class. just the element, i´m just dragging.
i tried with offsetTop and offsetLeft, but didn´t work.
has anyone a solution?
thank you.

2

hi,

while unchecked css-positioning you can only use getter-setter from hypes Api or getBoundingClientRect ( ) …

3

so, in my case, how do i write the code to revert the element?
this is hypes API using.
dragDropFlexi.hype.zip (13,9 KB)

4

if you check “Position with CSS left/top”.

Then simply run this javascript with your “Control Element Position” in On Drag action.

if (event['hypeGesturePhase'] === 'start') {
posX = element.offsetLeft;
posY = element.offsetTop;
}

if (event['hypeGesturePhase'] === 'end') {

hypeDocument.setElementProperty(element, 'left', posX, 1.0, 'easeinout')
hypeDocument.setElementProperty(element, 'top', posY, 1.0, 'easeinout')
}

at the start of the drag event it’s recording the left and top position then at the end it’s returning to those positions from the current position.

EDIT modification to your code. NOTE this is with CSS top/left checked. If you include Hans’s code below in the phase start condition then you do not need to check the CSS top/left box.

if (event['hypeGesturePhase'] === hypeDocument.kHypeGesturePhaseStart) {
	posX = element.offsetLeft;
	posY = element.offsetTop;
	console.log(posX, posY)
}

if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) {

var currentTop  = hypeDocument.getElementProperty(element, 'top');
var currentLeft = hypeDocument.getElementProperty(element, 'left');
var currentBottom = hypeDocument.getElementProperty(element, 'top') + hypeDocument.getElementProperty(element, 'height');
var currentRight = hypeDocument.getElementProperty(element, 'left') + hypeDocument.getElementProperty(element, 'width');

var dropZone = hypeDocument.getElementById("dropZone");
var sperre = hypeDocument.getElementById("sperre");

var dropZoneTop = hypeDocument.getElementProperty(dropZone, 'top');
var dropZoneBottom = hypeDocument.getElementProperty(dropZone, 'top') + hypeDocument.getElementProperty(dropZone, 'height');

var dropZoneLeft = hypeDocument.getElementProperty(dropZone, 'left');
var dropZoneRight = hypeDocument.getElementProperty(dropZone, 'left') + hypeDocument.getElementProperty(dropZone, 'width');

var hit1 = (dropZoneBottom > currentTop) && (dropZoneTop < currentBottom) && (dropZoneLeft < currentLeft) && (dropZoneRight > currentLeft);
var hit2 = (dropZoneBottom > currentTop) && (dropZoneTop < currentBottom) && (dropZoneLeft < currentRight) && (dropZoneLeft > currentLeft);


if (hit1 || hit2) {
	hypeDocument.startTimelineNamed('hit', hypeDocument.kDirectionForward);
	
	hypeDocument.setElementProperty(element, 'left', dropZoneLeft, 0.5, 'linear');
    hypeDocument.setElementProperty(element, 'top', dropZoneTop, 0.5, 'linear');
    
    hypeDocument.setElementProperty(sperre, 'left', dropZoneLeft, 0.1, 'linear');
    hypeDocument.setElementProperty(sperre, 'top', dropZoneTop, 0.1, 'linear');
 

    ///hypeDocument.setElementProperty(element, 'left', posX, 1.0, 'easeinout')
    ///hypeDocument.setElementProperty(element, 'top', posY, 1.0, 'easeinout')
} else {
	hypeDocument.setElementProperty(element, 'left', posX, 1.0, 'easeinout')
	hypeDocument.setElementProperty(element, 'top', posY, 1.0, 'easeinout')
}


}
1 Like
5 
if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseStart)
{
start = {
left: hypeDocument.getElementProperty(element, 'left'), 
top: hypeDocument.getElementProperty(element, 'top')
};
}

… and apply those on revert

1 Like
6

than you @DBear and @h_classen . i prefer CSS top/left not to be checked, because of the responsive layout.
but unfortunately i´m not able to apply @h_classen code on revert.
i tried

}	else {

hypeDocument.setElementProperty(element, 'left',1.0, 'easeinout');
hypeDocument.setElementProperty(element, 'top',1.0, 'easeinout');

}

but this moves the element to the top/left of the browser-window, as in hype “element” stands for this

7

@strmiska - re-hash of my previous code adding Han’s code to it.

if (event['hypeGesturePhase'] === hypeDocument.kHypeGesturePhaseStart) {
    start = {
    left: hypeDocument.getElementProperty(element, 'left'), 
    top: hypeDocument.getElementProperty(element, 'top')
}
}

if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) {

var currentTop  = hypeDocument.getElementProperty(element, 'top');
var currentLeft = hypeDocument.getElementProperty(element, 'left');
var currentBottom = hypeDocument.getElementProperty(element, 'top') + hypeDocument.getElementProperty(element, 'height');
var currentRight = hypeDocument.getElementProperty(element, 'left') + hypeDocument.getElementProperty(element, 'width');

var dropZone = hypeDocument.getElementById("dropZone");
var sperre = hypeDocument.getElementById("sperre");

var dropZoneTop = hypeDocument.getElementProperty(dropZone, 'top');
var dropZoneBottom = hypeDocument.getElementProperty(dropZone, 'top') + hypeDocument.getElementProperty(dropZone, 'height');

var dropZoneLeft = hypeDocument.getElementProperty(dropZone, 'left');
var dropZoneRight = hypeDocument.getElementProperty(dropZone, 'left') + hypeDocument.getElementProperty(dropZone, 'width');

var hit1 = (dropZoneBottom &gt; currentTop) && (dropZoneTop &lt; currentBottom) && (dropZoneLeft &lt; currentLeft) && (dropZoneRight &gt; currentLeft);
var hit2 = (dropZoneBottom &gt; currentTop) && (dropZoneTop &lt; currentBottom) && (dropZoneLeft &lt; currentRight) && (dropZoneLeft &gt; currentLeft);


if (hit1 || hit2) {
	hypeDocument.startTimelineNamed('hit', hypeDocument.kDirectionForward);
	
	hypeDocument.setElementProperty(element, 'left', dropZoneLeft, 0.5, 'linear');
    hypeDocument.setElementProperty(element, 'top', dropZoneTop, 0.5, 'linear');
    
    hypeDocument.setElementProperty(sperre, 'left', dropZoneLeft, 0.1, 'linear');
    hypeDocument.setElementProperty(sperre, 'top', dropZoneTop, 0.1, 'linear');

} else {
	hypeDocument.setElementProperty(element, 'left', start.left, 1.0, 'easeinout')
	hypeDocument.setElementProperty(element, 'top', start.top, 1.0, 'easeinout')
}

}
2 Likes
8

WOW - YES! thank you very much! working :kissing_heart:
to learn something: “start” is a variable in this case, written like JSON? (start.left)
or am i wrong?

9

Yes. Object Notation :wink:

It’s an object. It’s similar to an array just different notation.

Array (also considered a special type of object)
start = [“value”, “value”] /// can effectively be start = {0:“value”, 1:“value”}
Object
start = {“key”:“value”,“key”:“value”}

object are in key:value pairs and array’s are just values. Objects are easier to read and useful in some cases.

Better explanation on the interweb :slight_smile:

1 Like
10

thanx. i understand