Q: Drag and drop iAd Producer

Best way to get started is to add some web-ready images to the assets library and start dropping them on a page.

There are also several good resources on the web including two How To videos from Apple's Worldwide Developer's Conference:

Introduction to iBooks Author Widget and iAd Rich Media Ad Development

Building Advanced iBooks HTML 5 Widgets and iAd Rich Media Ads

...and the online version of the help:

iAd Producer Help

Cheers,

-Mark

A friend (who is more of a JS jockey than I) created a similar project. Here's how he did it.

For each draggable object, he added three event handlers:

• Touched Down
• Touch Dragged Inside
• Touched Up Inside

These can be added by selecting the object and changing the Inspector's INTERACTION > Events brick > + {event} > Execute JavaScript, or by using the menu, Code > Object Events > {event} > Execute JavaScript.

His code looked something like this:

// Define CLOSE_X_MIN, CLOSE_X_MAX, CLOSE_Y_MIN and CLOSE_Y_MAX to be
// "close enough" to the target drop zone.

this.onViewTouchDragInside = function (event) {
  var p = iAd.Point.fromEventInElement(event, this.layer.parentElement);
  p.x -= this.startTouchPoint.x;
  p.y -= this.startTouchPoint.y;
  p.x += this.startPosition.x;
  p.y += this.startPosition.y;
  this.position = p;
};
 
this.onViewTouchUpInside = function (event) {
  object_pos = this.position
  window.theposition = object_pos;
  var x = object_pos.x;
  var y = object_pos.y;
  if ((x >= CLOSE_X_MIN && x <= CLOSE_X_MAX) && (y >= CLOSE_Y_MIN && y <= CLOSE_Y_MAX)) {
    // close enough, right answer
    x = ((CLOSE_X_MAX + CLOSE_X_MIN) / 2);
    y = ((CLOSE_Y_MAX + CLOSE_Y_MIN) / 2);
    var p = new iAd.Point(x,y);
    this.position = p;
};

this.onViewTouchDown = function (event) {
  var p = iAd.Point.fromEventInElement(event, this.layer.parentElement);
  this.startPosition = this.position.copy();
  this.startTouchPoint = p;
};

If you need to perform a post-drag operation – an animation or sound effect – the onViewTouchUpInside method is how you would accomplish it. For example, the project I drew from used onViewTouchUpInside to determine if the drop was "close enough" to its given target to reward the user with a "match".

Dear all:

I have test this code and it works great!! Someone khows how can I do for make the figure draggable and also rotatable? Many thank's.

nice code but there are a couple of typos in the onViewTouchUpInside code block. It's missing a semicolon on the second line and the if statement bracket is not closed. It might also be simpler to declare those max and min x and y values as variables. Here's the corrected and easier to customise code:

this.onViewTouchUpInside = function (event) {

  object_pos = this.position;

  window.theposition = object_pos;

     //change nnn to your desired values

    var CloseXMin = nnn;

    var CloseXMax = nnn;

    var CloseYMin = nnn;

    var CloseYMax = nnn;

  var x = object_pos.x;

  var y = object_pos.y;

  if ((x >= CloseXMin && x <= CloseXMax) && (y >= CloseYMin && y <= CloseYMax)) {

    // close enough, right answer

    x = ((CloseXMin + CloseXMax) / 2);

    y = ((CloseYMin + CloseYMax) / 2);

    var p = new iAd.Point(x,y);

    this.position = p;

}

};