Skip to main content
K
KeelyM
Inspiring
August 16, 2017
Answered

Createjs - dragging an object within a bounding box

  • August 16, 2017
  • 4 replies
  • 4244 views

Hello,

I'm working in Adobe Animate CC and I'm trying to use javascript to create an interaction where the user drags an object along the Y axis, but the object remains within a certain area, or 'bounding box'. I was able to get the object (in this case, a movie clip with the instance name "handle") to be moved up and down with the mouse using this code:

this.handle.addEventListener("pressmove", fl_MouseClickHandler_2.bind(this));
function fl_MouseClickHandler_2(evt){
evt.currentTarget.y = evt.stageY;
}

I only want the object to move along the Y axis, so this worked really well. However, in my attempt to restrict how far the 'handle' will slide, I haven't been successful (I don't really know how to write code).

I found a good resource here: Text Drag (StackOverflow) - JSFiddle and have tried to adapt this code to meet my needs - this is how my code turned out - 

var sliderBoundary = new createjs.Shape();
sliderBoundary.graphics.beginStroke("#999")
.setStrokeStyle(2)
.drawRect(623, 212, 143, 282.85);
var bounds = sliderBoundary.getBounds();
var handleBounds = this.handle.getBounds();
this.stage.addChild(sliderBoundary);
this.handle.addEventListener("pressmove", fl_MouseClickHandler_2.bind(this));
function fl_MouseClickHandler_2(evt){
evt.currentTarget.y = Math.max(bounds.y, Math.min(bounds.y+bounds.height-handleBounds.height, evt.stageY));
this.stage.update();
}
this.handleBounds.x = bounds.x, this.handleBounds.y = bounds.y;
this.stage.update();

When I test the project in Chrome - all the objects still show up, however the handle does not slide at all anymore.

Here's an image to give a better idea of what I"m trying to achieve - The lighter colored rectangle I want to slide up and down along the Y axis by dragging/moving the mouse, but I'd like it to stay contained within the darker stroke rectangle. If you can offer any advice on how to achieve this it would be much appreciated!

This topic is closed to new replies. Start a new post to keep the conversation going.
Correct answer ClayUUID

A few things...

There is no need for any of those stage.update() calls. The stage already automatically updates at the frame rate you set.

Drawing the slider boundary, then using getBounds on it to get its bounds, is completely backward. You just drew it yourself, you obviously know how big the thing you just drew is.

getBounds doesn't work on shape objects, so it's returning null for both the boundary and the handle, which causes runtime errors.

You're assigning to the .x and .y of "handleBounds" instead of "handle", which also causes a runtime error.

Putting the .x and .y assignment on the same line separated by a comma is syntactically valid but pointless weirdness.

Anyway, this seems to work:

var handleHeight = 20; // actually half the height
var bounds = {x:623, y:212, width:143, height: 283};
var sliderBoundary = new createjs.Shape();  
sliderBoundary.graphics.beginStroke("#999").
setStrokeStyle(2).
drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
this.stage.addChild(sliderBoundary);  
this.handle.addEventListener("pressmove", fl_MouseClickHandler_2);
function fl_MouseClickHandler_2(evt) {
    evt.currentTarget.y = Math.max(bounds.y + handleHeight, Math.min(bounds.y + bounds.height - handleHeight, evt.stageY));
}
this.handle.x = bounds.x;
this.handle.y = bounds.y + bounds.height / 2; 

4 replies

C
ClayUUIDCorrect answer
Legend
August 16, 2017

A few things...

There is no need for any of those stage.update() calls. The stage already automatically updates at the frame rate you set.

Drawing the slider boundary, then using getBounds on it to get its bounds, is completely backward. You just drew it yourself, you obviously know how big the thing you just drew is.

getBounds doesn't work on shape objects, so it's returning null for both the boundary and the handle, which causes runtime errors.

You're assigning to the .x and .y of "handleBounds" instead of "handle", which also causes a runtime error.

Putting the .x and .y assignment on the same line separated by a comma is syntactically valid but pointless weirdness.

Anyway, this seems to work:

var handleHeight = 20; // actually half the height
var bounds = {x:623, y:212, width:143, height: 283};
var sliderBoundary = new createjs.Shape();  
sliderBoundary.graphics.beginStroke("#999").
setStrokeStyle(2).
drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
this.stage.addChild(sliderBoundary);  
this.handle.addEventListener("pressmove", fl_MouseClickHandler_2);
function fl_MouseClickHandler_2(evt) {
    evt.currentTarget.y = Math.max(bounds.y + handleHeight, Math.min(bounds.y + bounds.height - handleHeight, evt.stageY));
}
this.handle.x = bounds.x;
this.handle.y = bounds.y + bounds.height / 2; 
K
KeelyMAuthor
Inspiring
August 17, 2017

Thanks so much!! I'm still trying to grasp how JS works, I appreciate this a lot!!

Firefly Community Gallery
Adobe Firefly

Remix with Firefly Community Gallery

Thousands of free creations to fall in love with and remix in Firefly.

Explore now
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices