Drag

Introduction

Drag game object.

  • Author: Rex
  • Behavior of game object

Live demos

Usage

Sample code

Install plugin

Load minify file

  • Load plugin (minify file) in preload stage
    scene.load.plugin('rexdragplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexdragplugin.min.js', true);
    
  • Add drag behavior
    var drag = scene.plugins.get('rexdragplugin').add(gameObject, config);
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import DragPlugin from 'phaser3-rex-plugins/plugins/drag-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [{
                key: 'rexDrag',
                plugin: DragPlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Add drag behavior
    var drag = scene.plugins.get('rexDrag').add(gameObject, config);
    

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Import class
    import Drag from 'phaser3-rex-plugins/plugins/drag.js';
    
  • Add drag behavior
    var drag = new Drag(gameObject, config);
    

Create instance

var drag = scene.plugins.get('rexDrag').add(gameObject, {
    // enable: true,
    // axis: 0,      //0|'both'|'h&v'|1|'horizontal'|'h'|2|'vertical'|'v'
    // rotation: Phaser.Math.DegToRad(45)  // axis rotation in rad
});
  • enable : Set false to disable input events.
  • axis :
    • 'both','h&v', 'x&y', or 0 : Dragging on all directions.
    • 'horizontal','h', 'x', or 1 : Dragging on horizontal/x axis.
    • 'vertical','v', 'y', or 2 : Dragging on vertical/y axis.
  • rotation : Axis rotation in rad, available in horizontal or vertical axis mode.

Events

Built-in dragging events

gameObject.on('dragstart', function(pointer, dragX, dragY){ /*...*/ });
gameObject.on('drag', function(pointer, dragX, dragY){ /*...*/ });
gameObject.on('dragend', function(pointer, dragX, dragY, dropped){ /*...*/ });

Enable

  • Get
    var enable = drag.enable;  // enable: true, or false
    
  • Set
    drag.setEnable(enable);  // enable: true, or false
    // drag.enable = enable;
    
  • Toggle
    drag.toggleEnable();
    

Get dragging state

var isDragging = drag.isDragging;

Set rotation of axis

drag.setAxisRotation(rad);

Set axis mode

drag.setAxisMode(axis);
  • axis :
    • 'both','h&v', 'x&y', or 0 : Dragging on all directions.
    • 'horizontal','h', 'x', or 1 : Dragging on horizontal/x axis.
    • 'vertical','v', 'y', or 2 : Dragging on vertical/y axis.

Try drag

Game object will be dragged if there is any point above it.

drag.drag();

Drop

Game object will be dropped(dragend) manually.

drag.dragend();