Clicking & Dragging, seperate functions.

[imShyness]

Hello, quick question: 

Is it possible to have a container with onclick and ondrag functionality, but let them do different things? 

I'm working on a selection/drag-drop tool. Where if you click on the container a red border appears around the container (which means it's selected), but if you drag and drop it, It shouldn't be selected, it should just.. drag and drop. 

[ivan.popelyshev]

function onDragStart(event) {
                this.data = event.data;
                this.start_data = {x: event.data.originalEvent.screenX, y: event.data.originalEvent.screenY};
                this.dragPos = this.data.getLocalPosition(this.parent);

                this.oldPosition = new PIXI.Point();
                this.oldPosition.copy(this.position);
                //this.alpha = 0.5;
                this.dragging = true;
            }

            function onDragEnd(event) {
                var ev_data = event.data.originalEvent;
                //if real dragend
                if (this.start_data) {
                    if (Math.abs(this.start_data.x - ev_data.screenX) > 2 || Math.abs(this.start_data.y - ev_data.screenY) > 2)
                        event.stopPropagation();
                }
                this.dragging = false;
                // set the interaction data to null
                this.data = null;
            }

            function onDragMove() {
                if (this.dragging) {
                    var newPosition = this.data.getLocalPosition(this.parent);
                    var pv = container.position, pv2 = this.oldPosition;
                    pv.x = pv2.x + (newPosition.x - this.dragPos.x);
                    pv.y = pv2.y + (newPosition.y - this.dragPos.y);
                }
            }

This is working solution from one of my projects. See that thing with "even.stopPropagation"? That will help you. May the force be with you.

[imShyness]

Thanks alot! 

Works like a charm

[ivan.popelyshev]

Please like my post. Also, if you do "camera" drag and not container, please use "pivot" instead of "position". You position container on screen and specify pivot on your map. Like this, if you want point "whereIsCenter" to be in center of the screen, you do it:

container.position.set(renderer.width/2, renderer.height/2);
container.pivot.set(whereIsCenter.x, whereIsCenter.y);

That way scale also will work from/to center.