Easle js drag test

Easle js drag test, example with jumping behaviour

HTML

<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<canvas id="demoCanvas" width="500" height="500"></canvas>

CSS

#demoCanvas {
    border: 1px solid black;
}

JavaScript

var elementOptions = {
    stroke: 3,
    left: 0,
    top: 0,
    width: 100,
    height: 200,
    transformMatrix: [1, 0, 0, 1, 25, 25]
};

function rectElementCanvasObject(options) {
    var shape,
    rect = new createjs.Graphics()
        .setStrokeStyle(options.stroke)
        .beginStroke('rgba(255, 0, 0, 0.5)')
    //TODO random RGB color formula
    //'#'+(Math.random()*0xFFFFFF<<0).toString(16)
    .beginFill('rgba(255, 0, 0, 0.5)')
        .rect(
    options.left,
    options.top,
    options.width,
    options.height);
    shape = new createjs.Shape(rect);
    if (options.transformMatrix !== undefined) {
        shape.transformMatrix = new createjs.Matrix2D(
        options.transformMatrix[0],
        options.transformMatrix[1],
        options.transformMatrix[2],
        options.transformMatrix[3],
        options.transformMatrix[4],
        options.transformMatrix[5]);
    }
    return shape;
}

$(document).ready(function () {
    var canvasId, canvasElement, rectangle, dragger;
    canvasId = 'demoCanvas';
    canvasElement = new createjs.Stage(canvasId);
    canvasElement.mouseMoveOutside = true;
    rectangle = rectElementCanvasObject(elementOptions);

    dragger = new createjs.Container();
    dragger.x = 300; 
    dragger.y = 100;
   
        
    dragger.addChild(rectangle);
    
    dragger.addChild(new createjs.Shape(new createjs.Graphics().f("#f00").dc(0, 0, 10)));

    
    //add a matrix to a containet
    //dragger.transformMatrix = new createjs.Matrix2D(1, 0, 0, 1, 150, 100);
    
    // use x/y instead:
    dragger.x = 150;
    dragger.y = 100;

    dragger.on('mousedown', function (evt) {
        var ct = evt.currentTarget,
            local = ct.globalToLocal(evt.stageX, evt.stageY),
            nx = ct.regX - local.x,
            ny = ct.regY - local.y;
        //set the new regX/Y
        ct.regX = local.x;
        ct.regY = local.y;
        //adjust the real-position, otherwise the new regX/Y would cause a jump
        ct.x -=...