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

Newbie requesting assistance with multiple drag-and-drop & multiple targets

Explorer ,
Sep 12, 2012 Sep 12, 2012

Copy link to clipboard

Copied

I know this question has been asked a million times, but I'm still not quite getting the solution.  I know the solution calls for me using Arrays in part of my code, but I'm having problems understading how to implement it.  I am using Flash CS 5.5 with AS3.

I have a drag-and-drop flash file that is divided into 4 separate areas on the stage.  On each area, there are 7 spaces, meant for 7 different "puzzle pieces".  The first two spaces on each quadrant have very a very specific order for the correct puzzle pieces, while the additional 5 spaces on each quadrant also have specific pieces, but the order is not important.  I've included my code below for reference (note that I have not finished all of the instances, yet).

Basically, in the code that's been created so far, the following instances have specific targets with specific order:

D1_1_mc, D1_2_mc, D1_1_mc, D2_2_mc, D3_1_mc, D3_2_mc, D4_1_mc, and D4_2_mc.

All of the other instances, such as D1_3_mc, D2_3_mc, D2_4_mc, etc... do have specific quadrants they need to be dropped onto, but in terms of the last 5 "spaces" on each quadrant, the order does not matter.  I know I can keep doing what I'm doing, but I would prefer that the last 5 pieces on each quandrant do not have to be in a specific order.

Any help you can provide is greatly appreciated!

var startX:Number;

var startY:Number;

var counter:Number = 0;

D1_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D1_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D1_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D1_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D1_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D1_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D2_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D2_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D2_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D2_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D2_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D2_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D2_4_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D2_4_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D3_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D3_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D3_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D3_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D3_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D3_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D4_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D4_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D4_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D4_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D4_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D4_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D4_4_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D4_4_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

function pickUp(event:MouseEvent):void {

    event.target.startDrag(true);

    reply_txt.text = "";

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

    startX = event.target.x;

    startY = event.target.y;

}

function dropIt(event:MouseEvent):void {

    event.target.stopDrag();

    var myTargetName:String = "target_" + event.target.name;

    var myTarget:DisplayObject = getChildByName(myTargetName);

    if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){

        reply_txt.text = "Good Job!";

        event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);

        event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);

        event.target.buttonMode = false;

        event.target.x = myTarget.x;

        event.target.y = myTarget.y;

        counter++;

    } else {

        reply_txt.text = "Try Again!";

        event.target.x = startX;

        event.target.y = startY;

    }

    if(counter == 5){

        reply_txt.text = "Congratulations, you've done it!";

    }

}

D1_1_mc.buttonMode = true;

D1_2_mc.buttonMode = true;

D1_3_mc.buttonMode = true;

D2_1_mc.buttonMode = true;

D2_2_mc.buttonMode = true;

D2_3_mc.buttonMode = true;

D2_4_mc.buttonMode = true;

D3_1_mc.buttonMode = true;

D3_2_mc.buttonMode = true;

D3_2_mc.buttonMode = true;

D4_1_mc.buttonMode = true;

D4_2_mc.buttonMode = true;

D4_3_mc.buttonMode = true;

D4_4_mc.buttonMode = true;

TOPICS
ActionScript

Views

2.0K

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

LEGEND , Sep 13, 2012 Sep 13, 2012

Since there appeared to be afew possible discrepencies in the code you showed and what I was offering in response to your issues, I spent a little time getting a working model of what I imagine you have just using the three targets and four drop objects.  If you like, I can make the file available for you, but for the moment, here is the code that works...

 

var startX:Number;
var startY:Number;
var counter:Number = 0;

 

target_D2_1_mc.allowed = new Array(D2_1_mc);
target_D2_2_mc.allowed = new Array(

...

Votes

Translate

Translate
LEGEND ,
Sep 12, 2012 Sep 12, 2012

Copy link to clipboard

Copied

Would it be possible for you to assign an array of allowed dropees to each of the targets so that when you drop an item on the target, the target's array is checked to see if that object is allowed to be dropped there?  Some targets would have just one element in that array, while others could have more.  Then you could just do an indexOf() check on the array to see of the dropped object is in 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
Explorer ,
Sep 12, 2012 Sep 12, 2012

Copy link to clipboard

Copied

That makes sense.  However, I am unsure of how I would actually write that in my existing code.  I'm quite new to writing ActionScript.  The only reason I knew an Array would work is because I've seen it on the other postings as a solution around this same issue.  However, most of the code I've seen seems different that what I've started with, so when I see possible solutions for how it's written and what it replaces in the original code, it's throwing me off.

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
LEGEND ,
Sep 12, 2012 Sep 12, 2012

Copy link to clipboard

Copied

I don't know how you have your targets defined, but for each one you could assign an array...

target1_1_mc.allowed = new Array(D1_1_mc); // just one is okay

target1_2_mc.allowed = new Array(D1_2_mc);  // just one is okay

target1_3_mc.allowed = new Array(D1_3_mc,D1_4_mc); // either will be okay

then, later on when you are checking to see if the drop is good or not you would do something like...

if(MovieClip(event.target.dropTarget).allowed.indexOf(event.target.dropTarget.parent) > -1){

    // that's a good drop

} else {

    // that's a bad drop

}

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
Explorer ,
Sep 13, 2012 Sep 13, 2012

Copy link to clipboard

Copied

So just to confirm, I would add the Array statements at the top of my code (using the Target names I have used for instances) above the existing mouse-up/down event listeners. Then, I would go down to the existing drop function and replace this:

if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){

with this:

if(MovieClip(event.target.dropTarget).allowed.indexOf(event.target.dro pTarget.parent) > -1){

Right?  Nothing else needs to be modified?

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
LEGEND ,
Sep 13, 2012 Sep 13, 2012

Copy link to clipboard

Copied

No, you still need to have all your event listeners assigned from the dragging and the dropping, and it would help to leave the "event.target.dropTarget != null" part of the conditional in.

The array statements would be separate, and you would use the actual instance names to target them instead of what I showed.

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
LEGEND ,
Sep 13, 2012 Sep 13, 2012

Copy link to clipboard

Copied

I should add that there is a way to simply the code assigning the event listeners, using two loops and bracket notation, but save that for later.

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
Explorer ,
Sep 13, 2012 Sep 13, 2012

Copy link to clipboard

Copied

Ok, so I just tried doing a test, but now when I run it, I get the following error (or similar) when I try to drag the objects:

TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Shape@2b5e7e49 to flash.display.MovieClip.

    at TEST16658Adrag_fla::MainTimeline/dropIt()

This is what I've done with my code:

var startX:Number;

var startY:Number;

var counter:Number = 0;

target_D2_1_mc.allowed = new Array(D2_1_mc);

target_D2_2_mc.allowed = new Array(D2_2_mc);

target_D2_3_mc.allowed = new Array(D2_3_mc,D2_4_mc);

D1_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D1_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D1_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D1_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D1_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D1_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D2_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D2_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D2_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D2_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D2_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D2_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D2_4_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D2_4_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D3_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D3_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D3_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D3_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D3_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D3_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D4_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D4_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D4_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D4_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D4_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D4_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D4_4_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D4_4_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

function pickUp(event:MouseEvent):void {

    event.target.startDrag(true);

    reply_txt.text = "";

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

    startX = event.target.x;

    startY = event.target.y;

}

function dropIt(event:MouseEvent):void {

    event.target.stopDrag();

    var myTargetName:String = "target_" + event.target.name;

    var myTarget:DisplayObject = getChildByName(myTargetName);

    if (MovieClip(event.target.dropTarget).allowed.indexOf(event.target.dropTarget.parent) > -1){

        reply_txt.text = "Good Job!";

        event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);

        event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);

        event.target.buttonMode = false;

        event.target.x = myTarget.x;

        event.target.y = myTarget.y;

        counter++;

    } else {

        reply_txt.text = "Try Again!";

        event.target.x = startX;

        event.target.y = startY;       

    }

    if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){

        reply_txt.text = "Good Job!";

        event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);

        event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);

        event.target.buttonMode = false;

        event.target.x = myTarget.x;

        event.target.y = myTarget.y;

        counter++;

    } else {

        reply_txt.text = "Try Again!";

        event.target.x = startX;

        event.target.y = startY;

    }

    if(counter == 5){

        reply_txt.text = "Congratulations, you've done it!";

    }

}

D1_1_mc.buttonMode = true;

D1_2_mc.buttonMode = true;

D1_3_mc.buttonMode = true;

D2_1_mc.buttonMode = true;

D2_2_mc.buttonMode = true;

D2_3_mc.buttonMode = true;

D2_4_mc.buttonMode = true;

D3_1_mc.buttonMode = true;

D3_2_mc.buttonMode = true;

D3_2_mc.buttonMode = true;

D4_1_mc.buttonMode = true;

D4_2_mc.buttonMode = true;

D4_3_mc.buttonMode = true;

D4_4_mc.buttonMode = true;

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
LEGEND ,
Sep 13, 2012 Sep 13, 2012

Copy link to clipboard

Copied

It is most likely taking exception to this:  MovieClip(event.target.dropTarget)....  I was going under the assumption that what you had was working to some degree such that the target aspects were valid.

What you should do is put a trace just before that line to see if you can identify what your target is actually turning out to be... it sounds like it might be some Shape inside the movieclip you name  target_D2_1.  Try adding the following trace line just before the conditional...

trace(event.target.dropTarget, event.target.dropTarget.parent)

if (MovieClip(event.target.dropTarget).allowed.indexOf(event.target.drop Target.parent) > -1){

If that trace ends up showing a Shape and a MovieClip, then my bet goes on you having to use MovieClip(event.target.dropTarget.parent)... in the line that follows 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
Explorer ,
Sep 13, 2012 Sep 13, 2012

Copy link to clipboard

Copied

You were right.  That did seem to fix that issue, but now when I run it, I get a new error:

TypeError: Error #1010: A term is undefined and has no properties.

I ran the debugger and the error is related to this line in my code:

if (MovieClip(event.target.dropTarget.parent).allowed.indexOf(event.target.drop Target.parent) > -1){

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
LEGEND ,
Sep 13, 2012 Sep 13, 2012

Copy link to clipboard

Copied

Since there appeared to be afew possible discrepencies in the code you showed and what I was offering in response to your issues, I spent a little time getting a working model of what I imagine you have just using the three targets and four drop objects.  If you like, I can make the file available for you, but for the moment, here is the code that works...

 

var startX:Number;
var startY:Number;
var counter:Number = 0;

 

target_D2_1_mc.allowed = new Array(D2_1_mc);
target_D2_2_mc.allowed = new Array(D2_2_mc);
target_D2_3_mc.allowed = new Array(D2_3_mc,D2_4_mc);

 

D2_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
D2_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
D2_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
D2_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
D2_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
D2_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
D2_4_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
D2_4_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

 

function pickUp(event:MouseEvent):void {

reply_txt.text = "Good Luck";
    event.target.startDrag(true);
    event.target.parent.addChild(event.target);
    startX = event.target.x;
    startY = event.target.y;
}

 

function dropIt(event:MouseEvent):void {

 

    event.target.stopDrag();

 

if (event.target.dropTarget != null && MovieClip(event.target.dropTarget.parent).allowed.indexOf(event.target) > -1){
        reply_txt.text = "Good Job!";
        event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);
        event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
        event.target.buttonMode = false;
        event.target.x = MovieClip(event.target.dropTarget.parent).x;
        event.target.y =MovieClip(event.target.dropTarget.parent).y;
        counter++;
    } else {
        reply_txt.text = "Try Again!";
        event.target.x = startX;
        event.target.y = startY;       
    }


    if(counter == 5){
        reply_txt.text = "Congratulations, you've done it!";
    }
}

 

D2_1_mc.buttonMode = true;
D2_2_mc.buttonMode = true;
D2_3_mc.buttonMode = true;
D2_4_mc.buttonMode = true;

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
Explorer ,
Sep 13, 2012 Sep 13, 2012

Copy link to clipboard

Copied

Thanks.  I tried replacing all of my code with what you provided, but I'm still getting the 1010 error and the debugger is tracing it to this line:

if (event.target.dropTarget != null && MovieClip(event.target.dropTarget.parent).allowed.indexOf(event.target) > -1){

Could "MovieClip" in the above statement be causing the 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
LEGEND ,
Sep 13, 2012 Sep 13, 2012

Copy link to clipboard

Copied

Here is a link to the file I created using that code.  Maybe you can determine how yours differs and can determine what adjustment needs to be made...

http://www.nedwebs.com/Flash/AS3_DnD_Options.fla

You should make liberal use of the trace() function to track down which objects/code are causing problems.

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
Explorer ,
Sep 13, 2012 Sep 13, 2012

Copy link to clipboard

Copied

Ok, I just opened your file and am also getting that same error 1010 and it's related to that same line of code even within your FLA.  I am not sure why I am getting an error and you are not.  I am using Flash CS 5.5 if that helps.

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
LEGEND ,
Sep 13, 2012 Sep 13, 2012

Copy link to clipboard

Copied

When are you getting that error.  I get it if I am trying to add the last (4th) object to the thrid target with the other object already there.  Otherwise I do not get that error.

You should use the trace function before that line to see which objects in that line might be null.

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
Explorer ,
Sep 13, 2012 Sep 13, 2012

Copy link to clipboard

Copied

Still not sure why I was getting that error in your FLA, but I went back to my file with the code you had list.  It turns out that I had to add another array to get it to work correct:

target_D2_4_mc.allowed = new Array(D2_3_mc,D2_4_mc);

Thanks so much for your help!

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
LEGEND ,
Sep 13, 2012 Sep 13, 2012

Copy link to clipboard

Copied

LATEST

You're welcome.  From the code you showed, I thought there were only three targets.

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