• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Simulate a click and hold then a release using the keyboard

Community Beginner ,
Jan 15, 2023 Jan 15, 2023

Copy link to clipboard

Copied

I have an app where the user has to click and drag an item to the correct spot.  I want the user to be able to use the keyboard to do this. I want them to click A, b, c, d, to activate a particular spot then click 1 2 3 or 4 to tell them where to drop it. If not this kind of functionality any other suggestions are welcome. (i.e. move the across the stage using the arrows., etc.)

 

It's basically a drag and drop application.

Views

193

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
community guidelines
Community Expert ,
Jan 15, 2023 Jan 15, 2023

Copy link to clipboard

Copied

you can use keyboard listeners

 

window.addEventListener("keydown", downF.bind(this));
window.addEventListener("keyup", upF.bind(this));

Votes

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
community guidelines
Community Expert ,
Jan 16, 2023 Jan 16, 2023

Copy link to clipboard

Copied

Hi.

 

We need more details to suggest a better code, for now I would just like to suggest an approach for you to get started:

// this sample assumes that you have pieces in the main timline named like pieceA, pieceB, pieceC, pieceD...
// it also assumes that you have slots on stage named like slot0, slot1, slot2, slot3

var piecesKeys = [ "a", "b", "c", "d" ];
var slotKeys = [ "1", "2", "3", "4" ];
var piecePrefix = "piece";
var slotPrefix = "slot";
var selectedPiece, targetSlot;

function main()
{
	window.addEventListener("keydown", onKeyDown);
}

function onKeyDown(e)
{
	if (piecesKeys.indexOf(e.key) > -1)
	{
		selectPiece(0);
		selectedPiece = root[piecePrefix + e.key.toUpperCase()];
		selectPiece(1);
	}
	else if (slotKeys.indexOf(e.key) > -1)
	{
		if (selectedPiece && !selectedPiece.inPlace)
		{
			targetSlot = root[slotPrefix + e.key];
			
			if (!targetSlot.hasPiece)
			{
				selectedPiece.x = targetSlot.x;
				selectedPiece.y = targetSlot.y;
				selectedPiece.inPlace = true;
				targetSlot.hasPiece = true;
			}
		}
	}
}

function selectPiece(frame)
{
	if (selectedPiece && !selectedPiece.inPlace)
		selectedPiece.gotoAndStop(frame);
}

window.root = this;
main();

 

I hope it helps.

 

Regards,

JC

Votes

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
community guidelines
Community Expert ,
Jan 16, 2023 Jan 16, 2023

Copy link to clipboard

Copied

This is good code JoãoCésar I may use it myself. 

Votes

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
community guidelines
Community Beginner ,
Jan 18, 2023 Jan 18, 2023

Copy link to clipboard

Copied

LATEST

Sorry for the delay.  Here is better explanation.  My code is not beside me at the moment but here is some of it.

The overall application that I am trying to make is an application that dynamically draws a line from one point to another.  I have the line but i need to add an alternative method for accessibility.  Similar to a drag and drop but instead of dragging the entire shape a line is created and dropped on the square.

Screengrab.PNG

When the user hits "A" it should represent circle0 then if they hit 2 that would create and drop the line on the 2 square.

self.circle0.on("pressmove", lineBegin); //User drags the line
self.circle0.on("pressup", lineEnd); //User releases the line over a target
self.square0.on("pressmove", moveLine); //User moves the line from one target to another
self.square0.on("pressup", lineEnd); //User releases the line over the target
self.square0.on("mouseover", readyHit); //User hovers over a target
self.square0.on("mouseout", unreadyHit); //User not hovering over a target
self.circle0.on("click", lineBegin); //User selects the target that will evetually be the drag point
self.square0.on("click", moveLine); //User removes the line from a target to place it on another

Votes

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
community guidelines