how to start drag when clicking and to stop it when doing another click

[tunisian_jocker]

i'm new developer in phaser ,i have so much problem, i want to make a cards game, can someone help me ? how to start drag when clicking and to stop it when doing another click ? can i do it ?

[Westinghouse]

Look at these examples:

http://phaser.io/examples/v2/input/drag

http://phaser.io/examples/v2/input/drag-event-parameters

 

That should explain how to do it. 

[tunisian_jocker]

thanx westinghouse, but this explain how to add an action onDragStart and onDragStop, i want when onDragStart, the card folow the mouse position, when i click again i can stop draging

[Westinghouse]

Sorry for the misunderstand.

 

I've made an example, but I dont know if it works in Javascript I wrote it in Typescript and translated it to Javascript but could not tested it. 

I think the only way to do it, is with events. If you do it with polling, the bool variable will alter between true and false as long as you hold the mouse button. An event fires only once with each mouse click. 

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update});var bool;function preload() {        game.load.image('card', 'mycard.png');}function create() {    bool = false;    myCard = this.game.add.sprite(200, 200, 'card');          myCard.anchor.x = 0.5;    myCard.anchor.y = 0.5;              myCard.inputEnabled = true;    myCard.events.onInputDown.add(click());   }function update(){     if (bool){            myCard.position.x = game.input.mousePointer.x;            myCard.position.y = game.input.mousePointer.y;        }    }function click(){     bool=!bool;}

[tunisian_jocker]

thanx westinghouse,

this is my code,

i can drag my cards but the card come under the cursor , i have a problem in the position of cards , can some one help me?

BasicGame.Play = function (game) {    this.bg;    this.spriteTopLeft;    this.spriteTopRight;    this.spriteBottomLeft;    this.spriteBottomRight;    this.cards = new Array(            '1_p', '2_p', '3_p', '4_p', '5_p', '6_p', '7_p', '8_p', '9_p', '10_p',            '1_c', '2_c', '3_c', '4_c', '5_c', '6_c', '7_c', '8_c', '9_c', '10_c',            '1_d', '2_d', '3_d', '4_d', '5_d', '6_d', '7_d', '8_d', '9_d', '10_d',            '1_t', '2_t', '3_t', '4_t', '5_t', '6_t', '7_t', '8_t', '9_t', '10_t'            );    this.myCards = new Array();    this.CardsOfComputer = new Array();    this.CardsOnTheTable = new Array();    this.cardsToDrag = new Array();};BasicGame.Play.prototype = {    preload: function () {        for (var i = 0; i < this.cards.length; i++) {            this.load.image(this.cards[i], 'images/' + this.cards[i] + '.gif');        }    },    create: function () {        this.background = this.add.sprite(this.world.centerX, this.world.centerY, 'background');        this.background.anchor.setTo(0.5, 0.5);        var cards = this.sortCards(this.cards);        this.myCards = new Array(                cards[0], cards[1], cards[2]                );        this.CardsOfComputer = new Array(                cards[3], cards[4], cards[5]                );        this.CardsOnTheTable = new Array(                cards[6], cards[7], cards[8], cards[9]                );        for (var i = 0; i <= 9; i++) {            cards.splice(i, 1);        }        var x = 2;        var y = 0.5;        for (var i = 0; i < this.CardsOnTheTable.length; i++) {            var card = this.add.sprite(this.world.centerX, this.world.centerY, this.CardsOnTheTable[i]);            card.anchor.setTo(x, y);            x -= 2.5;            if (i == 1) {                y = 2;                x = 2;            }        }        var x = 2;        var y = -3;        for (var i = 0; i < this.myCards.length; i++) {            var card = this.add.sprite(this.world.centerX, this.world.centerY, this.myCards[i]);            card.anchor.setTo(x, y);            this.physics.arcade.enable(card);            card.inputEnabled = true;            card.events.onInputDown.add(this.click, this);            x -= 1.5;        }    },    click: function (card, pointer) {        //console.dir(pointer)        //console.log(carte.key);        //carte.input.enableDrag();        //carte.events.onDragStart.add(this.startDrag, this);        //carte.events.onDragStop.add(this.stopDrag, this);                //var x = carte.x;        //var y = carte.y;        //this.physics.arcade.moveToPointer(carte, 400, this.input.activePointer);        //this.bool=!this.bool;        if(!(this.cardsToDrag[card.key])){            this.cardsToDrag[card.key] = {                object:new Object(),                drag:false,                x:0,                y:0            };        }        var drag = !this.cardsToDrag[card.key].drag;        this.cardsToDrag[card.key] = {            object: card,            drag:drag,            x:card.position.x,            y:card.position.y        };            },    startDrag: function (current) {    },    stopDrag: function (current) {    },    sortCards: function (cards) {        cards= cards.sort(function () {            return 0.5 - Math.random();        });        cards= cards.sort(function () {            return 0.5 - Math.random();        });        cards= cards.sort(function () {            return 0.5 - Math.random();        });        return cards.sort(function () {            return 0.5 - Math.random();        });    },    update: function () {        for (var key in this.cardsToDrag) {            var obj = this.cardsToDrag[key];            var card = obj.object;            if(obj.drag){                card.position.x = this.input.mousePointer.x;                card.position.y = this.input.mousePointer.y;            } else {                card.position.x = obj.x;                card.position.y = obj.y;                this.cardsToDrag.splice(key, 1);            }        }    },    resize: function (width, height) {    }};

[Westinghouse]

I don't understand what you mean with 'the card come under the cursor', but I see in your code is that the anchor of your cards is out of the bounds of the card-sprites. 

        var x = 2;        var y = -3;        for (var i = 0; i < this.myCards.length; i++) {            var card = this.add.sprite(this.world.centerX, this.world.centerY, this.myCards[i]);            card.anchor.setTo(x, y);            this.physics.arcade.enable(card);            card.inputEnabled = true;            card.events.onInputDown.add(this.click, this);            x -= 1.5;

Here you set the anchor to (2,-3) that is way out of the bounds of your sprite. The anchor points should be between 0 and 1. 

[tunisian_jocker]

Thanx westinghouse,

Problem resolved