Click Event + Drag and drop

[doublemazaa]

I'm building an app that has some buttons for which I want to behave like so:

You click on it, Event 1 happens,
You drag the button, you can move it.

I'm running into the logic problem of not knowing whether a user is just clicking or starting a drag event. Does anyone know any logic to get around this issue?

[mpelland]

import flash.display.Sprite;
import flash.events.MouseEvent;

var circle:Sprite = new Sprite();
circle.graphics.beginFill(0xFFCC00);
circle.graphics.drawCircle(0, 0, 40);

var target1:Sprite = new Sprite();
target1.graphics.beginFill(0xCCFF00);
target1.graphics.drawRect(0, 0, 100, 100);
target1.name = "target1";

var target2:Sprite = new Sprite();
target2.graphics.beginFill(0xCCFF00);
target2.graphics.drawRect(0, 200, 100, 100);
target2.name = "target2";

addChild(target1);
addChild(target2);
addChild(circle);

circle.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown)

function mouseDown(event:MouseEvent):void {
circle.startDrag();
}
circle.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);

function mouseReleased(event:MouseEvent):void {
circle.stopDrag();
trace(circle.dropTarget.name);
}

you might also want to do a stage listener for on release because of some weird glitchiness

[doublemazaa]

Thanks! Very close to what I'm trying to do. Only difference is I don't want the click event to happen when you drop the button. Anyway around that?

[BeerOclock]

Theres are 3 events that are relavent here: MOUSE_DOWN, MOUSE_UP, and CLICK.
A CLICK is basically a MOUS_DOWN and a MOUSE_UP in succession on the same object.
If you have listeners for all 3, then a mouse click will fire all 3 in this order: DOWN, UP, CLICK.

To distinguish between a drag and a click in your case, you could save the mouse coordinates on the MOUSE_DOWN, and compare them to the mouse coordinates on MOUSE_UP. If they are different, then it was a drag operation, and you can set a flag to skip the CLICK event or something.

There are still problems with this approach, because after a MOUSE_DOWN event, but before the MOUSE_UP, you still dont know wether the user intends a click or a drag. So should you start the button dragging or not? To be unambiguous, you should have an entirely different drag mode. Like a new button somewhere else that you can toggle on and off (down means drag mode for all other buttons, up means click mode). Or you could have two separate hit areas on each button, one that is used for dragging, the other for clicks.

[theCodeBot]

Listen to the mouse move on mouse down, and if the mouse gets more than, say, 10 pixels away from the original mouse position, the user intended a drag, so start one. If the mouse goes up and mouse hasn't moved too much since the mouse down, it was a click, so react to that.

[mycaptainkite]

Ever find a solution for this? I'm trying to do the exact same thing, but I can't get the CLICK event not to trigger when MOUSE_UP goes off.

[doublemazaa]

No I ended up working around this problem. I used half of the button as a click area, and the other half as a drag area. I never found a good solution I liked.

[neoviper]

I ran into an issue similar to this in as2, but it the principle should be applicable to as3. I wanted click function and drag function, but be able to tell which is which. I had it set up so that it would click if you pressed and released inside it without leaving the bounds, but if you clicked it and dragged it out, then it would start a drag with the MC centered on the mouse. It was the best method I could think of, but it probably wouldn't work if you only want to make minute changes to the position. It works very nicely for moving it to a completely different position.