Drag and drop example for Titanium

drag.js

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));
});

i'm doing in the it's work on the IOS but on the android still error it can't convert object

E/JNIUtil ( 315): !!! Unable to convert unknown Java object class 'org.appcelerator.kroll.KrollRuntime$1' to Js value !!!
I/TiAPI ( 315): Touch start: {"source":{"size":{"height":430,"y":0,"width":30,"x":0},"keepScreenOn":false,"children":[],"height":"100%","width":30,"left":0,"backgroundRepeat":false,"rect":{"height":430,"y":0,"x":0,"width":30},"backgroundColor":"#336699","top":0,"_events":{"touchstart":{},"touchmove":{}}},"y":309,"x":19,"type":"touchstart"}
E/TiJSError( 315): (main) [7376,7376] ----- Titanium Javascript Runtime Error -----
E/TiJSError( 315): (main) [1,7377] - In app.js:27,17
E/TiJSError( 315): (main) [0,7377] - Message: Uncaught TypeError: Cannot read property 'x' of undefined
E/TiJSError( 315): (main) [1,7378] - Source:

can you help me?
so sorry i'm a beginner ^_^

Instead of using e.globalPoint.x you should use e.x and e.y because there is no globalPoint in e.

When I emplement this code, my app crashes somehow so I was hoping that you could find something I'm not doing right. Here's my code:

Element.prototype.draw = function (){
var drawing = Ti.UI.createView({
width: width,
height: height,
backgroundColor: color,
left: positionX,
top: positionY,
borderWidth: 3,
borderColor: '#000000',
});

var touchMoveBase = {
set: function(pointX, pointY){
this.x = pointX;
this.y = pointY;
}
}

var elementPosition = { top: drawing.top, left: drawing.left};

 drawing.addEventListener( 'touchstart', function(e){
        touchMoveBase.set(e.x, e.y);
 });

 drawing.addEventListener( 'touchmove', function(e){
    elementPosition.top += e.y - touchMoveBase.y;
    elementPosition.left += e.x - touchMoveBase.x;
    drawing.animate({
        top: elementPosition.top,
        left: elementPosition.left,
        duration: 1
    });
    touchMoveBase.set(e.x, e.y);
 });

This whole app-programming is really new to me so maybe it's just something small?

The code is ok, and can run correctly in android ! But the problem is the blink. I try all the solutions I can find in google search results, Finally , I can't solve the blink problem . Can you help me?

Just fix this code because globalPoint is decrapted:

function FirstView() {

    var self = Ti.UI.createView();

var circle = Titanium.UI.createView({
    height:200,
    width:200,
    backgroundColor:'#336699',
    top:10,
    left:50
});

self.add(circle);

var circlePosition = { top: circle.top, left: circle.left };
var xxx = 0;
var yyy = 0;

circle.addEventListener('touchstart', function(e) {
    xxx = e.x;
    yyy = e.y;
});

circle.addEventListener('touchmove', function(e) {
    circlePosition.top += e.y - yyy; 
    circlePosition.left += e.x - xxx;
    circle.animate({
        top: circlePosition.top, 
        left: circlePosition.left,
        duration: 1 
    });
});

circle.addEventListener('touchend', function(e) {
    xxx = 0;
    yyy = 0;
});

    return self;
}

module.exports = FirstView;

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.

slavikofmosonyi How you make it ?

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();

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

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!