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…