Skip to main content
Inspiring
September 27, 2013
Question

Newby to Flash -- need help with Drag and Drop

  • September 27, 2013
  • 1 reply
  • 2030 views

I have been trying to create a drag and drop in Flash where I have five different places for an instance of a mc to be dropped. I want to be able to drop only three instances to each place and these three instances are specific to one of the five "drop places".  I also want the mc instance to go back to its original position if it is not dropped on the right place.  I've got the actionscript working to drag and drop the mc instances on the "drop places"  but I cannot figure out how to do the if statements so that if it doesn't match the correct drop place it will go back to its original position.

Here's some of my code:

Analyze1_mc.objName = "Analyze1";

Analyze1_mc.val = 1;

Design1_mc.objName = "Design1";

Design1_mc.val = 4;

Analyze1_mc.buttonMode = true; // sets mouse pointer to hand

Design1_mc.buttonMode = true;

Analyze1_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag);

Analyze1_mc.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop);

Design1_mc.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag);

Design1_mc.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop);

var originalPosition:Point;

function returnToOriginalPosition(): void

{

          originalPosition = new Point(x,y)

          x = originalPosition.x;

          y = originalPosition.y;

}

// function to drag item clicked

function fl_ClickToDrag(event:MouseEvent):void

{

          event.currentTarget.startDrag();

 

          event.target.parent.addChild(event.target);

 

}

function fl_ReleaseToDrop(event:MouseEvent):void

{

          var target:MovieClip = event.currentTarget as MovieClip;

          var item:MovieClip = MovieClip(event.target);

          item.stopDrag();

if (event.target.hitTestObject(AnalyzeTarget_mc)  && (event.target.val == 1)) {

                                        trace ("Analyze1");

                                        event.target.x = AnalyzeTarget_mc.x + 42;

                                        event.target.y = AnalyzeTarget_mc.y + 5;

                                        updateItem(Analyze1_mc);

 

 

                              } else {

 

                                        returnToOriginalPosition();

}

if (event.target.hitTestObject(DesignTarget_mc) && (event.target.val == 4)) {

                                        trace ("Design1");

                                        event.target.x = DesignTarget_mc.x + 42;

                                        event.target.y = DesignTarget_mc.y + 5;

 

                                        updateItem(Design1_mc);

                              } else {

 

                                        returnToOriginalPosition();

                              }

function updateItem(item:MovieClip):void {

          buttonMode = false;

          removeEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag);

                    }

I put the trace in to check the function -- and I do get the output when the mc instance is dropped on the right place -- but there is no return to original position if the instance is dropped in the wrong spot and there is no update to the mc instance. 

Any help would be greatly appreciated. Thanks!

This topic has been closed for replies.

1 reply

Ned Murphy
Legend
September 27, 2013

I don't see where your returnToOriginalPosition function will do anything except possible complain about what x and y are supposed to be.

Before you move any of the objects they should all be assigned their own original position values.  When the incorrect drop is made you should only need to set the event.currentTarget.x and .y values to the event.currentTarget.originalX and .originalY values.

LBeirigerAuthor
Inspiring
September 27, 2013

Thank-you for your reply.  This may seem like a stupid question, but I am learning Actionscript as I go. 

I thought that the var statement above the function did assign the original position values for object.

var originalPosition:Point;

function returnToOriginalPosition(): void

{

          originalPosition = new Point(x,y)

          x = originalPosition.x;

          y = originalPosition.y;

}

I tried using

Analyze1_mc.x = 405;

Analyze1_mc.y = 208;

but that resulted in a syntax error -- what's the best way to assign the original position values?

Ned Murphy
Legend
September 27, 2013

That line you speak of is merely declaring a variable, nothing is being assigned to it.

One way of assigning the original position data to each object is to just assign it like follows:

Analyze1_mc.originalX = Analyze1_mc.x;

Analyze1_mc.originalY = Analyze1_mc.y;

etc...

Another way to do it with less code is to assign it generically just before you start dragging each of them...

function fl_ClickToDrag(event:MouseEvent):void

{

          event.currentTarget.originalX = event.currentTarget.x;

          event.currentTarget.originalY = event.currentTarget.y;

          event.currentTarget.startDrag();

 

          event.target.parent.addChild(event.target);

}

One thing I noticed in your code earlier is that you switch between using event.currentTarget and event.target.  If you want to be sure that the object your code is targetiing is the object that has the listener assigned to it (your movieclips) stick with using currentTarget.   target can end up pointing to something inside that object instead of the object itself.  In the following lines...

          var target:MovieClip = event.currentTarget as MovieClip;

          var item:MovieClip = MovieClip(event.target);

You could very well be assigning target and item as being the same object.  I don't think that is what you want.  You might wanting to have one of them be the object you drop it on, which would be the dropTarget, not the target