Question

这是一个简单的Appcelerator Titanium Mobile应用程序代码，它几乎可以正常工作，但是......

var drag = require('ti.draggable');

var win = Ti.UI.createWindow({exitOnClose: true, backgroundColor: 'black', navBarHidden: true});

var view1 = Ti.UI.createView({
    left: 0,
    width: '50%',
    height: '100%',
    backgroundColor: '#9966cc'
});

win.add(view1);

var dragView = drag.createView({
    backgroundColor: '#99cc33',
    left: 50, top: 50,
    width: 50,
    height: 50,
    zIndex: 5    
});

dragView.addEventListener('start', function(e){
    var p = {x: e.source.left, y: e.source.top};
    var tp = e.source.parent.convertPointToView(p, win);
    e.source.parent.remove(e.source);
    e.source.left = tp.x;
    e.source.top = tp.y;
    win.add(e.source);
});

dragView.addEventListener('end', function(e){
    var p = {x: e.left, y: e.top};
    var tp = win.convertPointToView(p, view2); 

    if(tp.x < 0){
        tp = win.convertPointToView(p, view1);
        e.source.parent.remove(e.source);
        e.source.left = tp.x;
        e.source.top = tp.y;
        view1.add(e.source);    
    }else{
        e.source.parent.remove(e.source);
        e.source.left = tp.x;
        e.source.top = tp.y;
        view2.add(e.source);    
    }
});

view1.add(dragView);

var view2 = Ti.UI.createView({
    left: '50%',
    width: '50%',
    height: '100%',
    backgroundColor: '#cc6699'
});

win.add(view2);

win.open();

如果我的dragView从view1拖到view2，并且dragView.left = 100，则dragView.top = 100，那么当我尝试再次拖动它时，它会在win上跳转到相同的坐标。那是为什么？

Answer 1

经过大量研究，我发现这不是一个错误。原因是在“结束”事件中您更改了坐标和视图的父级。这很好，因为视图停止移动。问题在于“开始”。您从父项中删除视图并将其重新附加到其他位置，这很好。什么不起作用，是重置坐标，因为在源代码内部，它们不断被改变，并且在事实之后在JS中做出的改变根本不影响它直到手指抬起屏幕

我构建此模块的原因是为了使Titanium中的可拖动视图流畅，但它可以很容易地在JS中实现。

你应该考虑两种选择之一;在JS中构建它，或使用maxLeft，minLeft，minTop，maxTop，属性来阻止视图移动到另一个视图的“外部”，但将视图附加到窗口。

Answer 2

非常感谢你的回答。我已经设法在不使用你的模块的情况下完成了它。这是源代码：

var win = Ti.UI.createWindow({
    exitOnClose: true,
    backgroundColor: 'black',
    navBarHidden: true  
});

var view1 = Ti.UI.createView({
    left: 0,
    width: '50%',
    height: '100%',
    backgroundColor: '#9966cc'
});

win.add(view1);

var dragView = Ti.UI.createView({
    backgroundColor: '#99cc33',
    left: 50, top: 50,
    width: 50,
    height: 50,
    zIndex: 5,
    startDragx: 0,
    startSragy: 0,
    dragCoef: 0    
});

dragView.addEventListener('touchstart', function(e){
    var p = {x: e.source.left, y: e.source.top};
    var tp = e.source.parent.convertPointToView(p, win);

    e.source.dragCoef = 0;

    e.source.parent.remove(e.source);
    e.source.left = tp.x;
    e.source.top = tp.y;
    win.add(e.source);

    e.source.startDragx = e.x;
    e.source.startDragy = e.y;
});

dragView.addEventListener('touchmove', function(e){
    if ((++e.source.dragCoef % 2) == 0){
        e.source.left += e.x - e.source.startDragx;
        e.source.top += e.y - e.source.startDragy;
        e.source.startDragx = e.x;
        e.source.startDragy = e.y;
        e.source.dragCoef = 0;
    }
});

dragView.addEventListener('touchend', function(e){
    var p = {x: e.source.left, y: e.source.top};
    var tp = win.convertPointToView(p, view2); 

    if(tp.x < 0){
        tp = win.convertPointToView(p, view1);
        e.source.parent.remove(e.source);
        e.source.left = tp.x;
        e.source.top = tp.y;
        view1.add(e.source);    
    }else{
        e.source.parent.remove(e.source);
        e.source.left = tp.x;
        e.source.top = tp.y;
        view2.add(e.source);    
    }
});

var view2 = Ti.UI.createView({
    left: '50%',
    width: '50%',
    height: '100%',
    backgroundColor: '#cc6699'
});

view2.add(dragView);

win.add(view2);

win.open();

但'touchend'事件不会发生。我试图添加事件监听器来赢取，而不是拖动视图，但是同样的故事，'touchend'事件从未激发过。问题出在哪儿？我只在android模拟器上启动它。

使用ti.draggable时隐藏的错误

2 个答案: