Skip to content

Instantly share code, notes, and snippets.

@mattheworiordan
Created July 9, 2011 18:12
Show Gist options
  • Star 16 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • 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));
});
@workaholicdev
Copy link

I did it as your codes. but there's a problem.
The value of 'circlePosition' will be increased more and more when you move the circle.
So I did it in my own way.

@dimohamdy
Copy link

slavikofmosonyi How you make it ?

@ajaysaini95700
Copy link

Here is perfect solutions for all devices
var circle = Ti.UI.createView({
height:300,
backgroundColor: 'red',
width:250
});
$.win.add(circle);

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

var wth = item1.getWidth()/2;
var hgt = item1.getHeight()/2;

item1.addEventListener('touchmove', function(e) {
touchMove(item1 , e);

});

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

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

}
$.win.open();

@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