// Just past me into into a blank app.js file and run
window = Titanium.UI.createWindow({
    backgroundColor:'#47a',
    exitOnClose: true
});

//load test image from the appcelerator web site
var image = Titanium.UI.createImageView({
   image:'http://www.appcelerator.com/wp-content/themes/appcelerator/img/HERO_iPh_social.png',
   backgroundColor:'transparent',
   height:'auto',
   width:'auto'
});

// Spin the image
var t = Ti.UI.create2DMatrix();
var spin = Titanium.UI.createAnimation();
t = t.rotate(3);
spin.transform = t;
spin.duration = 50;
spin.addEventListener('complete', function(e) {
    t = t.rotate(3);
    spin.transform = t;
    image.animate(spin);
});

//make the image dragable
image.addEventListener('touchstart', function (e) {
    image.ox = e.globalPoint.x - image.center.x;
    image.oy = e.globalPoint.y - image.center.y;
});
image.addEventListener('touchmove', function (e) {
    Ti.API.info(JSON.stringify(e));
    image.center = {
        x:(e.globalPoint.x - image.ox),
        y:(e.globalPoint.y - image.oy)
    };
});

window.add(image);
image.animate(spin);
window.open({fullscreen:true});

4 Answers

• Accepted Answer

  Here's what I came up with, recycling the code to use in any orientation:

  // Just past me into into a blank app.js file and run
  window = Titanium.UI.createWindow({
      backgroundColor:'#47a',
      exitOnClose: true
  });
  
  window.orientation = Titanium.UI.PORTRAIT;
  Ti.Gesture.addEventListener('orientationchange',function(e){
      window.orientation = e.orientation;
  });
  
  //load test image from the appcelerator web site
  var image = Titanium.UI.createImageView({
     image:'http://www.appcelerator.com/wp-content/themes/appcelerator/img/HERO_iPh_social.png',
     backgroundColor:'transparent',
     height:'auto',
     width:'auto'
  });
  
  // Spin the image
  var t = Ti.UI.create2DMatrix();
  var spin = Titanium.UI.createAnimation();
  t = t.rotate(3);
  spin.transform = t;
  spin.duration = 50;
  spin.addEventListener('complete', function(e) {
      t = t.rotate(3);
      spin.transform = t;
      image.animate(spin);
  });
  
  //make the image dragable
  image.addEventListener('touchstart', function (e) {
      Ti.API.info('width: '+ window.width +' height: '+ window.height);
      switch(window.orientation)
      {
          // UPSIDE_PORTRAIT
          case 2:
              image.ox = window.width - e.globalPoint.x - image.center.x;
              image.oy = window.height - e.globalPoint.y - image.center.y;
              break;
          // LANDSCAPE_LEFT
          case 3:
              image.ox = e.globalPoint.y - image.center.x;
              image.oy = window.height - e.globalPoint.x - image.center.y;
              break;
          // LANDSCAPE_RIGHT
          case 4:
              image.ox = window.width - e.globalPoint.y - image.center.x;
              image.oy = e.globalPoint.x - image.center.y;
              break;
          // PORTRAIT
          default:
              image.ox = e.globalPoint.x - image.center.x;
              image.oy = e.globalPoint.y - image.center.y;
              break;
      }
  });
  image.addEventListener('touchmove', function (e) {
      Ti.API.info(JSON.stringify(e));
  
      switch(window.orientation)
      {
          // UPSIDE_PORTRAIT
          case 2:
              image.center = {
                  x:(window.width - e.globalPoint.x - image.ox),
                  y:(window.height - e.globalPoint.y - image.oy)
              };
              break;
          // LANDSCAPE_LEFT
          case 3:
              image.center = {
                  x:(e.globalPoint.y - image.ox),
                  y:(window.height - e.globalPoint.x - image.oy)
              };
              break;
          // LANDSCAPE_RIGHT
          case 4:
              image.center = {
                  x:(window.width - e.globalPoint.y - image.ox),
                  y:(e.globalPoint.x - image.oy)
              };
              break;
          // PORTRAIT
          default:
              image.center = {
                  x:(e.globalPoint.x - image.ox),
                  y:(e.globalPoint.y - image.oy)
              };
              break;
      }
  });
  
  window.add(image);
  image.animate(spin);
  window.open({fullscreen:true});
  

• GREAT CODE.
  BUT…When I paste your dragable function into my own app.

  the drag is inverted.

  Touchmove up is drag down and left is right etc etc.

  Do you know a fix for this

  EDIT: It happens because the app is made in landscape, I guess its the same bug as with the swipe event…which will be fixed in 1.5.0

  or is there a temp solution?

• Doesn't work in Android. Doesn't move and doesn't drag.

• I tested on the android emulator and the is no movement or spinning. Hopefully 1.5 will fix this.

  I used globalPoint in the touch events which only works in portrait orientation as it returns absolute device pixels. You can try switching to using view based x and y co-ordinates by removing the ".globalPoint" from the code.

  Tom