Skip to content

Instantly share code, notes, and snippets.

@mattheworiordan
Created July 9, 2011 18:12
Show Gist options
  • Save mattheworiordan/1073811 to your computer and use it in GitHub Desktop.
Save mattheworiordan/1073811 to your computer and use it in GitHub Desktop.
Drag and drop example for Titanium
var circle = Titanium.UI.createView({
height:200,
width:200,
borderRadius:50,
backgroundColor:'#336699',
top:10,
left:50
});
currentWindow.add(circle);
// object to store last event position
var touchMoveBase = {
set: function(point) {
this.x = point.x;
this.y = point.y;
}
}
// circle position before it has been animated
var circlePosition = { top: circle.top, left: circle.left };
circle.addEventListener('touchstart', function(e) {
Titanium.API.info('Touch start: ' + JSON.stringify(e));
// get absolute position at start
touchMoveBase.set(e.globalPoint);
});
circle.addEventListener('touchmove', function(e) {
Titanium.API.info('Moving: ' + JSON.stringify(e));
// update the co-ordinates based on movement since last movement or touch start
circlePosition.top += e.globalPoint.y - touchMoveBase.y;
circlePosition.left += e.globalPoint.x - touchMoveBase.x;
circle.animate({
top: circlePosition.top,
left: circlePosition.left,
duration: 1
});
// reset absolute position to current position so next event will be relative to current position
touchMoveBase.set(e.globalPoint);
});
circle.addEventListener('touchend', function(e) {
Titanium.API.info('Stop drag: ' + JSON.stringify(e));
});
@samiahmohammadi
Copy link

Hi
How I can drag and drop images in appcelerator? or
How I can much some images together in appcelerator?

@macCesar
Copy link

macCesar commented Aug 27, 2021

Here is perfect solutions for all devices

let circle = Ti.UI.createView({
  width: 250,
  height: 300,
  backgroundColor: 'red'
})

$.win.add(circle)

let item1 = Ti.UI.createImageView({
  top: 0,
  left: 0,
  zIndex: 1,
  width: 50,
  height: 50,
  backgroundColor: 'green',
  image: '/burger_menu.png'
})

circle.add(item1)

let wth = item1.getWidth() / 2
let hgt = item1.getHeight() / 2

item1.addEventListener('touchmove', e => touchMove(item1, e))

function touchMove(obj, e) {
  let convertedPoint = obj.convertPointToView({ x: e.x, y: e.y }, circle)

  if (convertedPoint != null) {
    item1.animate({
      duration: 1,
      top: Math.round(convertedPoint.y / Ti.Platform.displayCaps.logicalDensityFactor) - hgt,
      left: Math.round(convertedPoint.x / Ti.Platform.displayCaps.logicalDensityFactor) - wth,
    })
  }
}

$.win.open()

This really help me, thanks!

With minor tweaks, I was able to turn it into an Alloy module!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment