Skip to main content
Known Participant
April 29, 2021
Answered

Drag and Drop

  • April 29, 2021
  • 2 replies
  • 7114 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
    Braniac
    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
    Braniac
    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
    Braniac
    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?

    Known Participant
    April 29, 2021

    Die Koordinaten abfragen ist ein guter Tip, aber diese Abfrage müsste auch während der Bewegung des DragObjekts passieren. Gibt es die Möglichkeit auf das Bewegen des DragObjekts zu reagieren, z. B. whileDragging()?

    Lilybiri
    Braniac
    April 29, 2021

    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.