Search code examples
javascriptdrag-and-drophtml5-canvascreatejs

Stage.addchild to bring object to front


I have a sorting game with 10 elements to drag and drop in the correct order.

When i begin to drag an object i want it to appear in front of all the other objects. Since createjs does not have a zindex property I was told to readd the item to the stage with stage.adchild(sequenceNumbers);

How do I properly add this to the mousedown or pressmove function?

for (var a = 0; a < gameData.Terms.length; a++) {
  rect = new createjs.Shape();
  rect.graphics.beginFill("blue").drawRoundRect(0, 0, 350, 30, 8);
  rect.name = a;

  var name = new createjs.Text(gameData.Terms[a].Definition, "14pt arial bold", "white");
  name.id = gameData.Terms[a].Name;
  name.textAlign = "left";
  name.y = rect.y + 2;
  name.x = rect.x + 4;

  var sequenceNumbers = new createjs.Container();

  sequenceNumbers.landingSpot = landingSpots[a];
  landingSpots[a].sequenceNumber = sequenceNumbers;

  sequenceNumbers.addChild(rect, name);
  stage.addChild(sequenceNumbers);
  sequenceNumbers.x = 300;
  sequenceNumbers.y = xOffset;
  xOffset += 40;

  var startPositionX;
  var startPostitionY;
  sequenceNumbers.on('mousedown', function (e) {
    stage.adchild(sequenceNumbers);

    var posX = e.stageX;
    var posY = e.stageY;
    startPositionX = e.stageX;
    startPositionY = e.stageY;
    this.offset = { x: this.x - posX, y: this.y - posY };
  });

  sequenceNumbers.on("pressmove", function (evt) {
    evt.currentTarget.x = evt.stageX;
    evt.currentTarget.y = evt.stageY;
    var posX = evt.stageX;
    var posY = evt.stageY;
    this.x = posX + this.offset.x;
    this.y = posY + this.offset.y;

    stage.update();
  });

  sequenceNumbers.on("pressup", function (evt) {
    var stuffUnderMouse = landingSpotContainer.getObjectsUnderPoint(evt.rawX, evt.rawY, 0);
    var oldSpot = evt.currentTarget.landingSpot;
    var spotToMoveTo = null;
    for (var i = 0; i < stuffUnderMouse.length; ++i) {
      if (typeof stuffUnderMouse[i].landingSpot !== 'undefined' && stuffUnderMouse[i].landingSpot != oldSpot) {
        spotToMoveTo = stuffUnderMouse[i].landingSpot;
        break;
      }
    }
  }

Solution

  • Just add the child again to its parent container:

    evt.currentTarget.parent.addChild(evt.currentTarget);
    

    should do the trick inside the mouse event function.

    Notice the function is called addChild and not adchild.