0

これは 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の場合、もう一度ドラッグしようとすると、勝利時に同じ座標にジャンプします。何故ですか？

4

2 に答える 2

0

多くの調査の結果、これはバグではないことがわかりました。理由は、「終了」イベントで座標とビューの親を変更するためです。ビューが移動を停止するため、これは問題ありません。問題は「開始」にあります。親からビューを削除し、別の場所に再接続すると、これは正常に機能します。うまくいかないのは、座標のリセットです。ソースコードの内部では、それらは常に変更されており、事後に JS で行われた変更は、指が画面を持ち上げるまでまったく影響しません。

このモジュールを作成した理由は、Titanium でドラッグ可能なビューをスムーズにするためですが、JS で簡単に実装できます。

2 つのオプションのいずれかを検討する必要があります。すべてJSで構築するか、maxLeft、minLeft、minTop、maxTop、プロパティを使用して、ビューが別のビューの「外側」に移動するのを止めますが、ビューをウィンドウにアタッチします。

于 2012-11-20T23:01:26.407 に答える
0

ご回答いただき、誠にありがとうございます。私はあなたのモジュールを使わずにそれを作ることができました。ソースコードは次のとおりです。

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」イベントは発生しませんでした。問題はどこだ？Androidエミュレーターでのみ起動します。

于 2012-11-21T07:39:45.270 に答える