tidrop's Introduction

Demo

Example

Ti.include("TiDrop.js");

var tabGroup = Ti.UI.createTabGroup();

var window = Ti.UI.createWindow({  
    title: "Drag + Drop",
    backgroundColor: "#FFF"
});

var tab = Ti.UI.createTab({  
    title: "Drag + Drop",
    window: window
});

var box1 = Ti.UI.createView({
	width: 100,
	height: 100,
	top: 10,
	left: 10,
	backgroundColor: "#7A0000"
});

var box2 = Ti.UI.createView({
	width: 100,
	height: 100,
	top: 10,
	left: 120,
	backgroundColor: "#007A00"
});

var container1 = Ti.UI.createView({
	width: 300,
	height: 120,
	top: 237,
	left: 10,
	backgroundColor: "#CCC",
	items: 0
});

function yay(e) {
	if(e.contained) {
		e.source.top = 247;
		e.source.left = 20;
	}
}

TiDrop.init(box1, container1, yay);
TiDrop.init(box2, container1, yay);

window.add(container1);
window.add(box1);
window.add(box2);

tabGroup.addTab(tab);  
tabGroup.open();

tidrop's People

Contributors

Stargazers

Watchers

tidrop's Issues

On android

The example is not working properly on android. when i click on the box, i get the following runtime error:
Type Error: Cannot read property "y" from null (file:///android_asset/Resources/TiDrop.js#34). can anyone help me?
Thanks in advance

move not smooth

when moving the box it's not smooth when dragging

Direction is buggy on orientation change

First, thanks for sharing your drag and drop class - very nice!

I've found that the direction of movement is buggy when the device in not in portrait orientation. To fix this, I added some orientation checks in your class. With the below code, your drag and drop class works from any orientation.

Blessings!

var TiDrop = {
    touching: false,
    position: {
        elementYStart: 0,
        elementXStart: 0,
        yStart: 0,
        xStart: 0,
        yCurrent: 0,
        xCurrent: 0
    },
    init: function(_element, _container, _callback) {
        _element.addEventListener("touchstart", function(e) { TiDrop.touchHandler(e); }, false );
        _element.addEventListener("touchmove", function(e) { TiDrop.touchHandler(e); }, false );
        _element.addEventListener("touchend", function(e) { TiDrop.touchHandler(e); }, false );
        _element.addEventListener("touchcancel", function(e) { TiDrop.touchHandler(e); }, false );

        if(_container) {
            this.container = _container;
        }

        if(_callback && typeof _callback == "function") {
            this.callback = _callback;
        } else {
            this.callback = false;
        }
    },
    touchHandler: function(_event) {
        if(_event.type == "touchstart") {
            this.touching = true;
            this.element = _event.source;

            switch(Ti.UI.orientation){
                case Ti.UI.PORTRAIT:
                case Ti.UI.UPSIDE_PORTRAIT:
                    this.position.elementYStart = this.element.top; 
                    this.position.elementXStart = this.element.left;
                    break;
                case Ti.UI.LANDSCAPE_RIGHT:
                case Ti.UI.LANDSCAPE_LEFT:
                    this.position.elementYStart = this.element.left; 
                    this.position.elementXStart = this.element.top; 
                    break;
            }

            this.position.yStart = parseInt(_event.globalPoint.y, 10);
            this.position.xStart = parseInt(_event.globalPoint.x, 10);
        } else if(_event.type == "touchmove") {
            this.position.yCurrent = parseInt(_event.globalPoint.y, 10);
            this.position.xCurrent = parseInt(_event.globalPoint.x, 10);

            var yDistance = this.position.yCurrent - this.position.yStart;
            var xDistance = this.position.xCurrent - this.position.xStart;

            switch(Ti.UI.orientation){
                case Ti.UI.PORTRAIT:
                    _event.source.top = this.position.elementYStart + yDistance; 
                    _event.source.left = this.position.elementXStart + xDistance; 
                    break;
                case Ti.UI.UPSIDE_PORTRAIT:
                    _event.source.top = this.position.elementYStart - yDistance; 
                    _event.source.left = this.position.elementXStart - xDistance; 
                    break;
                case Ti.UI.LANDSCAPE_RIGHT:
                    _event.source.left = this.position.elementYStart + yDistance; 
                    _event.source.top = this.position.elementXStart - xDistance; 
                    break;
                case Ti.UI.LANDSCAPE_LEFT:
                    _event.source.left = this.position.elementYStart - yDistance; 
                    _event.source.top = this.position.elementXStart + xDistance; 
                    break;
            }

        } else if(_event.type == "touchend" || _event.type == "touchcancel") {
            if(this.callback) {
                var _data = {
                    source: this.element,
                    position: {
                        y: this.position.yCurrent,
                        x: this.position.xCurrent
                    },
                    contained: this.withinContainer()
                };

                this.callback(_data);
            }

            this.element = null;
            this.touching = false;
            this.position = {
                elementYStart: 0,
                elementXStart: 0,
                yStart: 0,
                xStart: 0,
                yCurrent: 0,
                xCurrent: 0
            };
        } else {
            Ti.API.info("TiDrop: Not a valid touch event");
        }
    },
    withinContainer: function() {
        var contained = true;

        if(this.container) {
            if(this.element.left < this.container.left) { contained = false; }
            if(this.element.left > this.container.left + this.container.width) { contained = false; }
            if(this.element.left + this.element.width > this.container.left + this.container.width) { contained = false; }
            if(this.element.top < this.container.top) { contained = false; }
            if(this.element.top > this.container.top + this.container.height) { contained = false; }
            if(this.element.top + this.element.height > this.container.top + this.container.height) { contained = false; }
        } else {
            contained = false;
        }

        return contained;
    }
};

Recommend Projects