Skip to main content
Known Participant
April 29, 2021
Answered

Drag and Drop

  • April 29, 2021
  • 2 replies
  • 7163 views

Hallo,

ist es möglich bei einer Drag&Drop Interaktion zu prüfen, ob sich ein bestimmter Punkt des DragObjekts über dem DropTarget befindet? Und nur in diesem Fall ist die Drag&Drop Interaktion richtig.

In dem angehängten Video sieht man die Drag&Drop-Interaktion, die ich in Captivate erstellen soll.

Danke für die Unterstützung.

 

    This topic has been closed for replies.
    Correct answer Stagprime2687219

    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.

    2 replies

    Stagprime2687219
    Legend
    April 29, 2021

    I discovered a way to get pixel precision response to mimic what you seem to be looking for but there are some catches that might disqualify the option.

    1. I deviated from the Captivate Drag and Drop and utilized JavaScript to create the draggable element.

    2. I utilized the powerful JavaScript library known as GreenSock or gsap to make it less complicated.

    3. Number 2 above means that some post-publish hacking would be required

    4. If there are more draggables and/or situations needed - this would complicate things

    5. If you require scoring to an LMS - additional work would need to be done to figure that out.

     

    Short video shows behavior - there is no sound.

    Known Participant
    April 30, 2021

    @Stagprime2687219: Great, your solution is what I'm searching for. Number 4 and 5 are not needed. I looked up the GreenSock library but I'm totally lost. My JavaScript experiences are only basic. Could you please explain me how you realised the solution? Thanks.

    Stagprime2687219
    Stagprime2687219Correct answer
    Legend
    April 30, 2021

    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.

    Lilybiri
    Legend
    April 29, 2021

    Sorry, but my mastery of written German is too limited, although being Flemish I do understand 'Deutsch'.

     

    The only possible way I see is to make the drop target as small as possible. I didn't double-check however, do not know about the limitations. Setting up the snap point is  not difficult, but that is not really what you are aiming at. Maybe with JavaScript for the Object action by checking the exact coordinates?

    Inspiring
    April 29, 2021

    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.

     

     

    Known Participant
    April 29, 2021

    Danke für deinen Lösungsansatz. Damit lässt sich zumindest der 1. Punkt umsetzen.


    @Gaanf: Kannst Du mir erklären, was für Einstellungen Du vorgenommen hast, damit das DragObjeKt nicht angenommen wird, obwohl es über dem richtigen Target liegt aber auch die anderen Targets berührt?

    Danke.