limejs dragging items out of the scroller example

gistfile1.js

// this method is called on mousedown/touchstart
// image is the target that got the event

/*
To deal with the scroller's own dragging motion you have to check the direction of the event:

e.swallow(['mousemove', 'touchmove'], function(e) {
    e.release(['mousemove', 'touchmove']);
    var offset = goog.math.Coordinate.difference(e.position, pos);
    if (Math.abs(offset.y / offset.x) > .7) { // << magic number
      this.scroller.cancelEvents();
      album.activeGame.activateDrag(this, e);
    }

  });
  */

album.Game.prototype.activateDrag = function(image, e) {
  // make a clone
  var draggable = new lime.Sprite()
    .setSize(227, 152)
    .setFill(image.img.getFill())
    .setOpacity(.5)
    .setPosition(this.screenToLocal(image.localToScreen(new goog.math.Coordinate(0, 0))))
    .setAnchorPoint(0, 0)
    .setScale(image.holder ? 1 : .7);
  // add the clone to the scene(top layer) so it appears on front.
  this.appendChild(draggable);
  var self = this;

  // fading away to original shape a bit
  image.runAction(new lime.animation.FadeTo(.3)
    .setDuration(.4)
    .setEasing(lime.animation.Easing.EASE));

  // appear animation for the clone
  draggable.runAction(new lime.animation.Spawn(
    new lime.animation.FadeTo(1)
      .setDuration(.5)
      .enableOptimizations(),
    new lime.animation.ScaleTo(1)
      .setDuration(.5)));

  // connect with the mouse
  var drag = e.startDrag(false, null, draggable);

  // if dragging is cancelled
  goog.events.listen(drag, lime.events.Drag.Event.CANCEL, function(ev) {
    // fade back original element to full view
    image.runAction(new lime.animation.FadeTo(1)
      .setDuration(.3));

    // hide the clone and remove when done
    var hide = new lime.animation.FadeTo(0)
      .setDuration(.3);
    goog.events.listen(hide, 'stop', function() {
      self.removeChild(draggable);
    });
    draggable.runAction(hide);
  });

  // dropped on target
  goog.events.listen(drag, lime.events.Drag.Event.DROP, function(e) {

    var target = e.activeDropTarget;

    /*
    // this is for dragging item back to scroller
    if (target == self.scroller) {
      image.getParent()
        .removeChild(image);
      self.scroller.appendChild(image);
      image.setPosition(self.stack.length * 195, - 146);
      if (self.stack.length == self.distractions.length) {
        self.send_btn.runAction(new lime.animation.FadeTo(0));
      }
      album.audio.click();
      self.stack.push(image);
      e.stopPropagation();
      image.holder.image_ = null;
      image.holder = null;
      image.setOpacity(1)
        .setScale(.77);
      draggable.getParent()
        .removeChild(draggable);
      self.fixScrollerGaps();
    } else */
    image.runAction(new lime.animation.FadeTo(0)
      .setDuration(.2));

    e.moveEndedCallback = function() {
      // remove draggable
      draggable.getParent()
        .removeChild(draggable);
      // move the image somewhere else
      image.getParent()
        .removeChild(image);
      image.setPosition(0, 0);
      image.setOpacity(1)
        .setScale(1);
    }
  });

  if (this.selectedPage) {
    var page = this.selectedPage;
    for (var i = 0; i < page.holders.length; i++) {
      // add all valid targets
      if (page.holders[i].isActiveForImage(image)) drag.addDropTarget(page.holders[i]);
    }
  }
  /*
  // dragging back
  if (image.holder) {
    drag.addDropTarget(self.scroller);
  }*/
}