Highlighted

Get object coordinates

Community Beginner ,
Jun 09, 2020

Copy link to clipboard

Copied

I am trying to get the x,y, width, and height of an element/object/shape in order to determine if the mousup event x, y coordinates is contained with in the bounds of the element. This will be for a drag and drop type event.

Views

122

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Get object coordinates

Community Beginner ,
Jun 09, 2020

Copy link to clipboard

Copied

I am trying to get the x,y, width, and height of an element/object/shape in order to determine if the mousup event x, y coordinates is contained with in the bounds of the element. This will be for a drag and drop type event.

Views

123

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 09, 2020 0
Adobe Community Professional ,
Jun 09, 2020

Copy link to clipboard

Copied

You would need to use JavaScript code to achieve this.

 

Alternatively, you could use the Infosemantics CpExtra HTML5 plugin for Captivate:

Here is the object height: https://www.infosemantics.com.au/adobe-captivate-widgets/cpextra/help/command-variables/positioning-...

And the object width: https://www.infosemantics.com.au/adobe-captivate-widgets/cpextra/help/command-variables/positioning-...

 

While you are looking at these command variable help files you should probably look at the xcmndPosX and xcmndPosY variables as well.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 09, 2020 0
Community Beginner ,
Jun 10, 2020

Copy link to clipboard

Copied

Thank you so much for this information and I will definitely keep it as a reference. I am aware that JavaScript is required, but I guess I was not specific in my post. (it was late and I was frustrated)

But I have figured out away to do what I was needing to do.

  1. Make the drop target a button with no actions
  2. In JavaScript (for the slide, not the button), subscribe to the button’s mouse up event.
  3. Test for which object I am dragging.

When the event triggers for that button, I know the mouse button was release over it. Which is all I really wanted anyway.  I got so caught with trying to do collision detection this solution was evading me for about a month.  (If someone needs code snippets for what I did, please reply.)

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2020 0
Adobe Community Professional ,
Jun 10, 2020

Copy link to clipboard

Copied

By all means post your code snippet here.  There are probably many users that would be interested to learn how to do this.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2020 0
jpd005 LATEST
Community Beginner ,
Jun 17, 2020

Copy link to clipboard

Copied

divID = GetID("BTN_BIT"); // get the exact name of the dragable element {GetID is a custom function}
document.getElementById(divID).addEventListener("mousedown", BITDown); // subscribe to the mousedown event

divID = GetID("Answer_1_"); // get the exact name of the target element
document.getElementById(divID).addEventListener("mouseup", Ans1MouseUp); // subscribe to the mouseup event


document.addEventListener("mousemove",OnMouseMove); // mouse move on the document
document.addEventListener("mouseup" ,OnMouseUp); // mouse up on the document

var MoveBIT = false; // flag to know which item is being draged

// Variable for mosue/dragable element
var initialX = 0;
var initialY = 0;
var currentX = 0;
var currentY = 0;
var xOffset = 0;
var yOffset = 0;

function Ans1MouseUp(event)
{
print("You made it!");
/*
This is how you know the left mouse button was released above this object
Now do something
*/
}

//
// OnMouseUp
// Move item back to its place holder
// Reset dragging flags
function OnMouseUp(event)
{

// the one being dragged needs to be moved back
if (MoveBIT)
{ Translation( (-1000), (-1000), GetID("BTN_BIT") ); }

// reset back to false since the mouse is up none of them are being dragged
MoveBIT = false;
}

/*
* Move only the button that was clicked
*/
function OnMouseMove(event)
{

currentX = event.x - initialX;
currentY = event.y - initialY;
//print("Raw ( " + event.x + ", " + event.y + " )" );
//print("Adj ( " + currentX + ", " + currentY + " )" );

if(MoveBIT == true )
{
Translation( currentX, currentY, "BTN_BIT");
}

xOffset = currentX;
yOffset = currentY;
}

// This is how the mosue coordinates relate to the screen coordinates
function Translation(xPos, yPos, el)
{
let elem = document.getElementById( GetID(el ) +'c' );
elem.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}

function BITDown(event)
{
print(" BITDown ");
initialX = event.x;
initialY = event.y;

MoveBIT = true;
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 17, 2020 0