Run timeline if an element is to specific position (Drag / Drop)

dragdrop

(kostas) #1

Can someone hep me with the above problem. I want to create a script (propably an if statement) which is playing a timeline when two rectangles are in specific possision on the canvas. More specific i want the script to check if the two objects are in two different possisions (object A to possision A and object B to possision B) and if they do then run a timeline. Thank you in advance.


Advanced Drag and Drop
(René) #2

Are these objects moved by the user (dragged) or do change position with physics or a timeline animation?


#3

As René has mentioned … need to know a little more to be more precise with the answers.

Note the following is pseudo code. The logic would be something like:

if (theBoundsOfObjA == theBoundsOfPositionA && theBoundsOfObjB == theBoundsOfPositionB) {
    play your timeline
}

Now, depending on the way you are moving your objects you would want to check for this condition inside that action and keep a record on the positions (bounds) of the objects as they move. Maybe a setInterval or using requestAnimationFrame


(kostas) #4

Thank you for your answers.i am uploading a sample…I want the timeline Correct to be played when the user sets the two boxes in a specific position…Posision Sample.hype.zip (13.3 KB)


#5

Hi Kostas!

You might have a look at the following:

It seems like this demo does just about everything You want with just a few minor adjustments required.

Below is the part in the code where You could run the timeline - however if simply getting the word “Correct” to appear is the only reason for running the “correct” timeline, the You could stick with the “innerHTML” approach as per the “D-n-d_test.Hype.zip” file.

I wrote in “Correct” in the example below so You could see where to put it - the above referenced Hype ZIP file does not use this text. But I think You get the idea. This is also where You would put the code to run a timeline if You still wished to do that.


“IntersectTest()” function from the “D-n-d_test.Hype.zip”


Rewards/points for dragging an element into a particular position
(Hans-Gerd Claßen) #6

@JimScott is right, @Kostas you’re requestion dragNdrop … dragAndDropHypeStyle.hype.zip (23.8 KB)


Advanced Drag and Drop
(kostas) #7

First of al thankfor the answers.I am realising that i have confused you. I dont want to drag and drop anything. I want a script to check when the boxes are in the specific place (top and left properties) and then to triger a timeline. Of course the objects will be more than two. Mybe my english is bad sorry for that.


#8

Maybe this is what you want? If you are just moving the elements on click.

This code should go in the CheckPosision() function:

var conditionA = hypeDocument.getElementProperty(box1, 'top') == "226" && hypeDocument.getElementProperty(box1, 'left') == "203";
var conditionB = hypeDocument.getElementProperty(box2, 'top') == "226" && hypeDocument.getElementProperty(box2, 'left') == "303";
	
if (conditionA && conditionB){ // are true
	// do something here like play a timeline
	element.innerHTML = "Correct";
} else {
	element.innerHTML = "Try Again";
}

(kostas) #9

yeahhhh thats exactly you are souper DBear…thanks a lot…i just coudnt write the correct var…


#10

Hi all,
I’m new to Hype and JavaScript, and I’m trying to do basically the same thing as the original poster. Specifically, I’m trying to get a timeline to start when an image is dragged on top of another image.

I followed some of the examples above and came up with this code, but it’s not working and I don’t why… I was hoping someone could help?


#11

Can you share a Hype document so we can see this in action?


#12

Yes! Here’s a quick sample file of the problem I’m having: (I simplified the graphics)

sample-DNDproblem-hype.zip (102.0 KB)


#13

It looks like this was working, but you didn’t have anything going on in the ‘shirt’ timeline so it didn’t seem to work. You can monitor the state of where your shirt is with some additional console.log references:

	currentX = event['hypeGestureXPosition'];
	currentY = event['hypeGestureYPosition'];
	
	console.log('currenty=' + currentY); 
	console.log('currentx=' + currentX);
	
	var shirt = hypeDocument.getElementById('shirt');
	var shirtX = shirt.getBoundingClientRect().left;
	var shirtY = shirt.getBoundingClientRect().top;
	
	//This is supposed to test if the object being dragged is near enough to the shirt, and if so play a timeline.	
	if (currentX >= shirtX && currentY >= shirtY) {
		hypeDocument.startTimelineNamed('shirt', hypeDocument.kDirectionForward)
		console.log('shirtstart');
	}

sample-DNDproblem.hype.zip (100.1 KB)


#14

Thank you so much! Found the issue with my original document, it was with the graphics not the code whoops… and the console.log is super useful, thank you!


#15

Follow-up question: Shouldn’t the code work the same way if I use .width and .height instead of .top and .left? For some reason it isn’t… and I’ve checked for other errors…

sample-updated.zip (103.3 KB)


#16

You’re trying to figure out if a X or Y position is within a certain range, so it doesn’t really help to know the width of target – you need to know the location of the target. If you put the console.log statements back in you’ll see that the if statement is correctly giving you X and Y coordinates as you drag an object, but comparing that drag location to a width and height of an object doesn’t make sense.


#17

You’re right… I think I got it to work using console.log X&Y coordinates. Thank you so much for your help, I really appreciate it!