1 Correct answer
Here is the code I came up with including a little explanation.
I also placed some comments in the code to point out certain things - hopefully that helps.
// This line basically clears the way and allows access to the draggable element
gsap.to("#myDrag", {autoAlpha: 0});
// This will create a draggable object.
// The name of the object is myDrag
Draggable.create("#myDragc", {
// This defines the behavior of the drag. It can drag along both X and Y axis
type: "x,y",
// This defines what happens 
20
Replies
I am not a JS expert, not sure it can be done during the dragging movement. However you could send the drag source back after the movement using the Object Action:
I don't think the InBuilt states for the D&D objects can help in this case.
Das hier sollte mehr oder weniger machen, was Du willst. Drag&Drop registriert nur 'Success', wenn das zweite Zelt mittig an das erste angesetzt wird.
Ermoeglicht wird das durch die Kombination mehrerer kleiner unsichtbarer Drop Targets ueber und um dem Bild von Zelt 1. Nur das kleine Drop Target ueber der Schleuse ist als korrkte Antwort definiert. 'Success' wird nur erreicht, wenn nur das korrekte Drop Target, und kein anderes, vom zweiten Zelt beruehrt wird.
Snap Behaviour / Position der Drop Targets sollter auf 'Absolute' sein (keine Ahnung wie das alles in der Deutschen Version benannt ist).
Leider kann ich hier aus irgendeinem Grund keine Projektdatei anhaengen, aberr ich hoffe der Screenshot reicht.
Here is the code I came up with including a little explanation.
I also placed some comments in the code to point out certain things - hopefully that helps.
// This line basically clears the way and allows access to the draggable element
gsap.to("#myDrag", {autoAlpha: 0});
// This will create a draggable object.
// The name of the object is myDrag
Draggable.create("#myDragc", {
// This defines the behavior of the drag. It can drag along both X and Y axis
type: "x,y",
// This defines what happens as the object is being dragged
// It will check for correct position and change the state of the drop target
// If in the correct position - show the red border state named hit
onDrag: function() {
if ((this.x==-143) && (this.y==0)) {
cp.changeState("myDrop","hit");
}
// If in the wrong position - show the Normal state
else {
cp.changeState("myDrop","Normal");
}
},
// This defines what happens when you release the mouse to drop object
onDragEnd: function() {
// If either position is incorrect - send the object back to the start 0,0
if ((this.x!=-143) || (this.y!=0)) {
gsap.to("#myDragc", {x: 0, y: 0});
}
}
});
Be sure to keep the 'c' at the end of your object names as it appears in the code.
Please note that the starting placement of your draggable object will always be at coordinate 0,0
The values for X and Y in the code are relative values to the start position.
To get this information, I first placed the object in the correct position and recorded the X and Y
Then I placed the object in its start position and recorded the X and Y
Your values should reflect the difference in these positions.
The code above will be placed as an Execute JavaScript action for the onEnter event to the slide.
After the project is published, you will need to do some additional work so that the GSAP library is included with the project. You will need to open the published index.html file with a text editor and look for line 144.
Oh dear - that picture looks small...
add the gsap libraries to your list here and make sure you place a copy of them in the assets folder with the others.
Hopefully this helps.
AdChoices