Skip to main content
M
mp63178988
Inspiring
October 23, 2023
Answered

Equivalent actionscript

  • October 23, 2023
  • 2 replies
  • 641 views
 
Good morning,
I have been looking for a long time but my lack of experience and knowledge handicaps me.
Is there an "animate" equivalent for the startDrag(myClip, false, left, top, right, bottom) method that existed in ActionScript?
A big thank you to anyone who can help me.
    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

    Sorry. Totally forgot about the constraints. You can create a utility function like the one below and apply it to the onDrag function or you can add a couple of if statements like suggested by @kglad .

     

    function onStartDrag(e)
{
	var target = e.currentTarget;
	target.offset = { x: e.stageX / stage.scaleX - target.x, y: e.stageY / stage.scaleY - target.y };
}

function onDrag(e)
{
	var target = e.currentTarget;
	var rec = target.dragRectangle;
	
	target.x = clamp(rec.left, e.stageX / stage.scaleX - target.offset.x, rec.right);
	target.y = clamp(rec.top, e.stageY / stage.scaleY - target.offset.y, rec.bottom);
}

function clamp(min, value, max)
{
	if (value < min)
		return min;
	
	if (value > max)
		return max;
	
	return value;
}

createjs.Touch.enable(stage);
stage.mouseMoveOutside = true;
this.instanceYouWantToDrag.dragRectangle = { left: 38.75, top: 46.25, right: 526.35, bottom: 312.55 };
this.instanceYouWantToDrag.on("mousedown", onStartDrag);
this.instanceYouWantToDrag.on("pressmove", onDrag);

     

    2 replies

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    October 23, 2023

    Hi.

     

    If you're talking about the HTML5 Canvas, then there's no built-in method that is equivalent to Flash's startDrag. You need to code this behavior yourself. Like this:

    function onStartDrag(e)
{
	var target = e.currentTarget;
	target.offset = { x: e.stageX / stage.scaleX - target.x, y: e.stageY / stage.scaleY - target.y };
}

function onDrag(e)
{
	var target = e.currentTarget;
	target.x = e.stageX / stage.scaleX - target.offset.x;
	target.y = e.stageY / stage.scaleY - target.offset.y;
}

createjs.Touch.enable(stage);
stage.mouseMoveOutside = true;
this.instanceYouWantToDrag.on("mousedown", onStartDrag);
this.instanceYouWantToDrag.on("pressmove", onDrag);

     

    Regards,

    JC

    M
    mp63178988Author
    Inspiring
    October 23, 2023
    Thank you for your very useful response, but how can you limit movements to a very specific area such as a rectangle for example? What ActionScript offered with the values ​​(left, top, right, bottom).
      kglad
      Community Expert
      kgladCommunity Expert
      Community Expert
      October 23, 2023

      add conditionals to onDrag

        kglad
        Community Expert
        kgladCommunity Expert
        Community Expert
        October 23, 2023

        i assume you're asking for easeljs/javascript code, https://codepen.io/samualli/pen/xbVGpP

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