@curiousmedia/drag-manager v1.0.2

DragManager

A controller for handling "Click & Stick" or "Drag & Drop" functionality for PBS games

Callback functions when start drag and end drag of a DisplayObject happen

• DragManager
  • Usage
  • new DragManager(stage, startCallback, endCallback)
  • .setActive(active)
  • .addEventsToObject(display)
  • .removeEventsFromObject(display)
  • .startDrag(display)
  • .stopDrag()
  • .handleMouseDown(event)
  • .handleStageMouseMove(event)
  • .handleStageMouseUp(event)
  • .distanceTo(a, b) ⇒ Number
  • .add(...displayObject)
  • .remove(...displayObjects)
  • .clear()

Also see examples folder:

import DragManager from '@curiousmedia/drag-manager';

// CreateJS Stage
const stage = new createjs.Stage(document.querySelector('canvas'));

// Stage update
createjs.Ticker.framerate = 60;
createjs.Ticker.addEventListener("tick", stage);

// Start callback function when we start the drag
function startDrag(event) {
    // Get the selected DisplayObject
    let target = event.selected;
    // OR
    let dragObject = dragManager.selected;

    // Do things with the selected DisplayObject
}

// End callback function when we end the drag
function endDrag(event) {
    // Get the selected DisplayObject
    let target = event.selected;
    // OR
    let dragObject = dragManager.selected;

    // Do things with the selected DisplayObject
}

// DragManager instance
const dragManager = new DragManager(stage, startDrag, endDrag);

// Create Display Object
let circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 250;
circle.y = 250;
stage.addChild(circle);

// Add DisplayObjects to be controlled by the DragManager
dragManager.add(
    circle
);

// Turn on the events for the stage and DragManager's children
    dragManager.setActive(true);

new DragManager(stage, startCallback, endCallback)

Constructor

dragManager.setActive(active)

Set the events of this DragManager active or not

dragManager.addEventsToObject(display)

Add the DragManager events to the DisplayObject

dragManager.removeEventsFromObject(display)

Remove the DragManager events from the DisplayObject

dragManager.startDrag(display)

Manually start dragging an object

dragManager.stopDrag()

Manually stop dragging our current object

dragManager.handleMouseDown(event)

Handle the mousedown event on the drag objects

dragManager.handleStageMouseMove(event)

Handle the stagemousemove Event

dragManager.handleStageMouseUp(event)

Handle the stagemouseup event Determine if we have dragged or if we need to set click and stick

dragManager.distanceTo(a, b) ⇒ Number

Get the distance between two points/vectors/objects with an "x" and "y" property

Returns: Number - - The distance between the Vectors

dragManager.add(...displayObject)

Add an object to be managed by this DragManager

dragManager.remove(...displayObjects)

Remove an object from this DragManager

dragManager.clear()

Clear out all our drag objects and events from this DragManager