使用 ti.draggable 时隐藏的错误

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”事件。我试图添加事件侦听器来取胜，而不是 dragView，但这是同一个故事，'touchend' 事件从未触发。哪里有问题？我只在安卓模拟器上启动它。