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

Constraining drag and drop

Participant ,
Mar 31, 2021 Mar 31, 2021

Copy link to clipboard

Copied

I have a bar symbol that I need to constrain to vertical movement as well as just how far it can go up and down when dragged. I have been looking at the constrain js function but cannot quite figure it out. Here's the script without constraint. I think it is fairly simply to add a constraint function, but I'm not quite sure how.

var startDrag = startDragF.bind(this);
this.Bar1.addEventListener("pressmove", startDrag);
function startDragF(e){
var p = stage.globalToLocal(e.stageX, e.stageY);
e.currentTarget.x = p.x;
e.currentTarget.y = p.y;
}

 

TOPICS
How to

Views

1.3K

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

correct answers 1 Correct answer

Community Expert , May 14, 2021 May 14, 2021

if you want only vertical movement with no constraints on the vertical range:

 

function startDragF(e){

var p = stage.globalToLocal(e.stageX, e.stageY);

e.currentTarget.y = p.y;

}
}

Votes

Translate

Translate
LEGEND ,
Mar 31, 2021 Mar 31, 2021

Copy link to clipboard

Copied

Just use if then statements to check the coordinate values. if x > max value then make x equal to max value yadda yadda etc. Nothing hard about it.

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
Participant ,
Mar 31, 2021 Mar 31, 2021

Copy link to clipboard

Copied

Well, it's not hard if you have a good command of js. I'll give it a shot. Thank you.

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
Participant ,
May 13, 2021 May 13, 2021

Copy link to clipboard

Copied

Just getting back to this. The bar sits on the stage at x=328, so I've tried different ways of writing this without success. 

 

var startDrag = startDragF.bind(this);

this.Bar1.addEventListener("pressmove", startDrag);


function startDragF(e){
var p = stage.globalToLocal(e.stageX, e.stageY);
e.currentTarget.x = p.x;
e.currentTarget.y = p.y;

if (p.x > 328) {
p.x = 328;
}
}

Not sure if that assumption about 328 is wrong or if my language is wrong. 

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 ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

vertical movement is the y-axis. and your constraint should appear before assigning e.currentTarget values:

 

function startDragF(e){

var p = stage.globalToLocal(e.stageX, e.stageY);

if(p.y<=328){
e.currentTarget.x = p.x;
e.currentTarget.y = p.y;

}
}

 

 

and, in general, for constraining within a rectangle:

 

var minX = xxx;

var maxX = xxxx;

var minY = yyy;

var maxY = yyyy;

 

function startDragF(e){

var p = stage.globalToLocal(e.stageX, e.stageY);

if (p.x>=minX && p.x<=maxX && p.y>=minY && p.y<=maxY) {
e.currentTarget.x = p.x;
e.currentTarget.y = p.y;

}
}

 

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
Participant ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

Right, regarding Y. I was trying to constrain horizontal movement and allow the user to drag vertically. Thought that was the way to do it.

 

I'm afraid I don't understand how to use this. The first code you provided says that if the target is at 328y, then the current target stays at 328? Not sure. And not sure how to modify it further I'm afraid.

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 ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

if you want to constrain horizontal movement (to less than/equal 328):

 

function startDragF(e){

var p = stage.globalToLocal(e.stageX, e.stageY);

if(p.x<=328){
e.currentTarget.x = p.x;
e.currentTarget.y = p.y;

}
}

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
Participant ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

I tried that with both x and y but the target doesn't move with this code. 

var startDrag = startDragF.bind(this);

this.Bar1.addEventListener("pressmove", startDrag);

function startDragF(e){

var p = stage.globalToLocal(e.stageX, e.stageY);

if(p.x<=328){
e.currentTarget.x = p.x;
e.currentTarget.y = p.y;

}
}

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 ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

you need something on stage with instance name Bar1 and you shouldn't have extraneously problematic code elsewhere, drag (kglad.com)

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
Participant ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

I do. Drag and drops, without constraint, works fine with this:

 

var startDrag = startDragF.bind(this);

this.Bar1.addEventListener("pressmove", startDrag);

function startDragF(e){
var p = stage.globalToLocal(e.stageX, e.stageY);
e.currentTarget.x = p.x;
e.currentTarget.y = p.y;
} 

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 ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

there's no drop in the code snippets you're posting, so i suspect you have code you're not showing that's causing a problem.

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
Participant ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

Don't think so. This is a very simple project that I'm jsut trying to get the code right for before applying to my "real" project. I tried attaching it here, but yet again, this interface gives me an error message. But you can see here there is just one frame of code, and you can see it.

DavidacrossAmerica_0-1621010369149.png

 

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 ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

does the link work for you?

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
Participant ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

I am not sure what link you are referring to. 

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 ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

this msg:

 

you need something on stage with instance name Bar1 and you shouldn't have extraneously problematic code elsewhere, drag (kglad.com)

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
Participant ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

Oh, sorry. I somehow missed that it was a link. I see your demo now, but the bar is not constrained. My demo works the same. You can drag and drop the bar anywhere. 

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 ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

you can drag Bar1 to the right of 328?

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
Participant ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

Ah, no. But I'm trying to constrain it to vertical movement only. And in my project, I can drag it past 328x with the last code we discussed anyway. 

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 ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

this would be funny if it weren't aggrevating me.

 

first, i said vertical movement is the y-axis and suggested the following to constrain vertical movement:

 

function startDragF(e){

var p = stage.globalToLocal(e.stageX, e.stageY);

if(p.y<=328){
e.currentTarget.x = p.x;
e.currentTarget.y = p.y;

}
}

 

then you said you wanted to constrain horizontal movement so i suggested:

 

function startDragF(e){

var p = stage.globalToLocal(e.stageX, e.stageY);

if(p.x<=328){
e.currentTarget.x = p.x;
e.currentTarget.y = p.y;

}
}

 

and i included code to contrain both horizontal and vertical, as bonus:

 

var minX = xxx;

var maxX = xxxx;

var minY = yyy;

var maxY = yyyy;

 

function startDragF(e){

var p = stage.globalToLocal(e.stageX, e.stageY);

if (p.x>=minX && p.x<=maxX && p.y>=minY && p.y<=maxY) {
e.currentTarget.x = p.x;
e.currentTarget.y = p.y;

}
}

 

and now i don't know what you're saying.  but no matter what you want to constrain (within a rectangle), the code just above this line will do it.

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
Participant ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

Sorry to aggravate you. I guess I worded it poorly. I said, "I was trying to constrain horizontal movement and allow the user to drag vertically." I meant I wanted them to only be able to move it veritcally. I'll give it a shot again with that full code. For one thing, I mistook your "var minX = xxx;" etc lines as examples in which the x's and y's needed numbers. Fingers crossed....

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 ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

if you want only vertical movement with no constraints on the vertical range:

 

function startDragF(e){

var p = stage.globalToLocal(e.stageX, e.stageY);

e.currentTarget.y = p.y;

}
}

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
Participant ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

That's it. Now to see if I can apply it to the full project. Thanks!

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 ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

you're welcome.

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
Participant ,
May 15, 2021 May 15, 2021

Copy link to clipboard

Copied

I have it working in my main project, but a new issue has emerged. When the user clicks on the bar, it jumps up on the page. It appears that it positions itself to center on where the mouse click occurs. What needs to happen (functionally though not necessarily in scripting) is that the bar not move until the user drags it. So it doesn't need to be center positioned upon a click. I've looked for some js guidance on this but haven't yet found how to do 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
Participant ,
May 15, 2021 May 15, 2021

Copy link to clipboard

Copied

Thinking about this more, what needs to happen is that the bar positions itself so the top of it is where the mouse click occurs. Again, at the moment, it positions itself to the center of the bar where the mouse click occurs. 

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