Drag and Drop sample

by lannymcnie

HTML

<script src="https://code.createjs.com/createjs-2015.11.26.combined.js"></script>
<canvas id="demoCanvas" width="800" height="600"></canvas>

JavaScript

//Stage
    var stage = new createjs.Stage("demoCanvas");

    //VARIABLES
    //Drag Object Size
    dragRadius = 40;
    //Destination Size
    destHeight = 100;
    destWidth = 100;

    //Circle Creation
    var label = new createjs.Text("DRAG ME", "14px Lato", "#fff");
    label.textAlign="center";
    label.y -= 7;
    var circle = new createjs.Shape();
    circle.graphics.setStrokeStyle(2).beginStroke("black")
    .beginFill("red").drawCircle(0,0, dragRadius);


    //Drag Object Creation
    //Placed inside a container to hold both label and shape
    var dragger = new createjs.Container();
    dragger.x = dragger.y = 100;
    dragger.addChild(circle, label);
    dragger.setBounds(100, 100, dragRadius*2, dragRadius*2);
    //DragRadius * 2 because 2*r = width of the bounding box
    var label2 = new createjs.Text("HERE", "bold 14px Lato", "#000");
    label2.textAlign = "center";
    label2.x += 50;
    label2.y += 40;


    var box = new createjs.Shape();
    box.graphics.setStrokeStyle(2).beginStroke("black").rect(0, 0, destHeight, destWidth);
    var destination = new createjs.Container();
    destination.x = 350;
    destination.y = 50;
    destination.setBounds(350, 50, destHeight, destWidth);

    destination.addChild(label2, box);

    //DRAG FUNCTIONALITY =====================
    dragger.on("pressmove", function(evt){
         evt.currentTarget.x = evt.stageX;
        evt.currentTarget.y = evt.stageY;
         stage.update(); //much smoother because it refreshes the screen every pixel movement instead of the FPS set on the Ticker
         if(intersect(evt.currentTarget, destination)){
           evt.currentTarget.alpha=0.2;
           box.graphics.clear();
           box.graphics.setStrokeStyle(3)
           .beginStroke("#0066A4")
           .rect(0, 0, destHeight, destWidth);

         }else{
           evt.currentTarget.alpha=1;
           box.graphics.clear();     box.graphics.setStrokeStyle(2).beginStroke("black").rect(0, 0, destHeight,...