@curiousmedia/drag-manager
DragManager controls the Drag & Drop and Click & Stick functionality of CreateJS DisplayObjects
Last updated 4 months ago by ishoa .
MIT · Original npm · Tarball · package.json
$ cnpm install @curiousmedia/drag-manager 
SYNC missed versions from official npm registry.

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

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

Param Type Description
stage Createjs.Stage Our CreateJS Stage for events
startCallback function Callback function to trigger on the initial mousedown of a drag object
endCallback function Callback function to trigger when a drag or click/stick has finished

dragManager.setActive(active)

Set the events of this DragManager active or not

Param Type Description
active Bool True enables events / False disables events

dragManager.addEventsToObject(display)

Add the DragManager events to the DisplayObject

Param Type Description
display createjs.DisplayObject DisplayObject to add events to

dragManager.removeEventsFromObject(display)

Remove the DragManager events from the DisplayObject

Param Type Description
display createjs.DisplayObject DisplayObject to remove events from

dragManager.startDrag(display)

Manually start dragging an object

Param Type Description
display createjs.DisplayObject The DisplayObject to start dragging

dragManager.stopDrag()

Manually stop dragging our current object

dragManager.handleMouseDown(event)

Handle the mousedown event on the drag objects

Param Type Description
event Event 'mousedown' event

dragManager.handleStageMouseMove(event)

Handle the stagemousemove Event

Param Type Description
event Event 'stagemousemove' event

dragManager.handleStageMouseUp(event)

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

Param Type Description
event Event 'stagemouseup' event

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

Param Type Description
a Point/Object {x: 0, y: 0}
b Point/Object {x: 0, y: 0}

dragManager.add(...displayObject)

Add an object to be managed by this DragManager

Param Type Description
...displayObject createjs.DisplayObject one ore more createjs.DisplayObject

dragManager.remove(...displayObjects)

Remove an object from this DragManager

Param Type Description
...displayObjects createjs.DisplayObject one ore more createjs.DisplayObject

dragManager.clear()

Clear out all our drag objects and events from this DragManager

Current Tags

  • 1.0.2                                ...           latest (4 months ago)

3 Versions

  • 1.0.2                                ...           4 months ago
  • 1.0.1                                ...           4 months ago
  • 1.0.0                                ...           4 months ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 3
Dependencies (0)
None
Dev Dependencies (7)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |