Drag and Drop with line

[Gyan Singh]

Hello friends i make a drag and drop function by help of you...

i want draw a line from drag to drop.

i have done this with AS2.0

but i couldn't did in AS3...
can anyone help me...


var score:Number = 0;
var startX:Number;
var startY:Number;
var startLineX:Number;
var startLineY:Number;


circleMc.addEventListener(MouseEvent.MOUSE_DOWN, dragThis);
circleMc.addEventListener(MouseEvent.MOUSE_UP, dropThis);

squreMc.addEventListener(MouseEvent.MOUSE_DOWN, dragThis);
squreMc.addEventListener(MouseEvent.MOUSE_UP, dropThis);

errowMc.addEventListener(MouseEvent.MOUSE_DOWN, dragThis);
errowMc.addEventListener(MouseEvent.MOUSE_UP, dropThis);

polygonMc.addEventListener(MouseEvent.MOUSE_DOWN, dragThis);
polygonMc.addEventListener(MouseEvent.MOUSE_UP, dropThis);

function dragThis(event:MouseEvent):void
{
event.target.startDrag(true);
startX = event.target.x;
startY = event.target.y;
}

function dropThis(event:MouseEvent):void
{
event.target.stopDrag();
var myTargetName:String = "target_" + event.target.name;
var myTargetisplayObject = getChildByName(myTargetName);
trace(myTarget);
if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget)
{
resultTxt.text = "Good Job";
event.target.removeEventListener(MouseEvent.MOUSE_ DOWN, dragThis);
event.target.removeEventListener(MouseEvent.MOUSE_ DOWN, dropThis);
event.target.buttonMode = false;
event.target.x = myTarget.x;
event.target.y = myTarget.y;
startLineX = myTarget.x;
startLineY = myTarget.y;
trace("Going on....");
score ++;

} else
{
resultTxt.text = "Try Again !";
event.target.x = startX;
event.target.y = startY;
}

}


circleMc.buttonMode = true;
squreMc.buttonMode = true;
errowMc.buttonMode = true;
polygonMc.buttonMode = true;

[sebrofm]

what's the problem?

[Gyan Singh]

A line should be start from drag point to drop piont.
I am also sending the both file.

[Navee]

Everything looks fine and working fine. The difference between the AS2 and AS3 file is that you have no method set to DRAW a line in the AS3 project.


In AS2 you have:
function onEnterFrame(hi):Void {

clear();
lineStyle(5,0,50);
moveTo(spotMc1._x,spotMc1._y);
lineTo(dragMc1._x,dragMc1._y);

moveTo(spotMc2._x,spotMc2._y);
lineTo(dragMc2._x,dragMc2._y);

moveTo(spotMc3._x,spotMc3._y);
lineTo(dragMc3._x,dragMc3._y);

moveTo(spotMc4._x,spotMc4._y);
lineTo(dragMc4._x,dragMc4._y);
}

It does not exist anywhere in your AS3 project so you should not get a line. If you revisit your AS2 file and comment out the line lineStyle(5,0,50); like this //lineStyle(5,0,50); and test your movie you will get the same results you are getting in your AS3 project.

I am not too familiar with the methods used in AS3 but I am sure it is just as simple to implement by referencing the drawing methods in help (F1)

I do know that you will need to add.

stage.addEventListener(Event.ENTER_FRAME, yourHandler);

function yourHandler(event:Event):void {

the line drawing methods here...

}

You're almost there...just a little snag. If you did indeed code it in AS2 then you should know that you cannot have a line drawn without actually creating a method to do so naturally. Ha-ha, you will figure it out...I'm sure of this


Cheers.

[sebrofm]

ok i did quite a bit of an overhaul but i got it to work how i think you were shooting for.

var score:Number = 0;
var startX:Number;
var startY:Number;
var startLineX:Number;
var startLineY:Number;

setup(circleMc);
setup(squreMc);
setup(errowMc);
setup(polygonMc);



function setup(shape:MovieClip) : void{
    shape.addEventListener(MouseEvent.MOUSE_DOWN, dragThis);
    shape.addEventListener(MouseEvent.MOUSE_UP, dropThis);
    shape.addChildAt(new Sprite(), 1);
    shape.startX = shape.x;
    shape.startY = shape.y;
    shape.mouseChildren = false;
}
function dragThis(event:MouseEvent):void
{
    event.target.startDrag(true);
    stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
}
function onMove(m:MouseEvent) : void {
    drawLine(MovieClip(m.target));
}
function drawLine(item:MovieClip) : void {
    var line:Sprite = Sprite(item.getChildAt(1));
    var localStart:Point = item.globalToLocal(new Point(item.startX, item.startY));
    var localItem:Point = line.globalToLocal(new Point(item.x, item.y));
    with(line.graphics){
        clear();
        moveTo(localStart.x, localStart.y);
        lineStyle(2, 0);
        lineTo(localItem.x, localItem.y);
    }
        
}    

function dropThis(event:MouseEvent):void
{
    event.target.stopDrag();
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove);
    var myTargetName:String = "target_" + event.target.name;
    var myTarget:DisplayObject = getChildByName(myTargetName);
    trace(myTarget);
    if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget){
        resultTxt.text = "Good Job";
        event.target.removeEventListener(MouseEvent.MOUSE_DOWN, dragThis);
        event.target.removeEventListener(MouseEvent.MOUSE_DOWN, dropThis);
        event.target.buttonMode = false;
        event.target.x = myTarget.x;
        event.target.y = myTarget.y;
        trace("Going on....");
        score ++;
    
    } else{
        resultTxt.text = "Try Again !";
        event.target.x = event.target.startX;
        event.target.y = event.target.startY;
        event.target.getChildAt(1).graphics.clear();
    }
}


circleMc.buttonMode = true;
squreMc.buttonMode = true;
errowMc.buttonMode = true;
polygonMc.buttonMode = true;

[Gyan Singh]

Hi Sebrofm and Navee,
Thanks a lot..