drag-and-drop - ネイティブ スクリプトでドラッグ アンド ドロップを使用する

Question

ネイティブ スクリプト アプリで絶対レイアウトで配置されている一部のラベルに、ドラッグ アンド ドロップ機能を持たせたいと考えています。ドラッグアンドドロップを使用して新しい絶対位置に移動することは可能ですか? はいの場合、これを達成する方法を説明できますか?

前もって感謝します。

Answer 1

少し調査した結果、次の手順でこれを達成できることがわかりました。

• 絶対レイアウトを定義する
• その中にラベルを貼る
• ラベル オブザーバーでのパン ジェスチャ
• deltaX と deltaY を使用すると、ラベルの絶対レイアウトの静的メソッド setLeft() と setTop() を使用して、ラベルの左と上の値を変更できます。

サンプル XML:

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
  <AbsoluteLayout>
    <Label left="10" top="10"  text="drag me" id="dragLabel" />
  </AbsoluteLayout>
</Page>

サンプル js コード:

var viewModule = require("ui/core/view");
var gestures = require("ui/gestures");
var absoluteLayout = require("ui/layouts/absolute-layout");
function pageLoaded(args) {

  var page = args.object;
  var dragLabel = viewModule.getViewById(page, "dragLabel");
  var observer = dragLabel.observe(gestures.GestureTypes.pan, function (panGestureEventData) {

        var deltaX = panGestureEventData.deltaX;
        var deltaY = panGestureEventData.deltaY;

        absoluteLayout.AbsoluteLayout.setTop(this, deltaY);
        absoluteLayout.AbsoluteLayout.setLeft(this, deltaX);
  }, dragLabel);
};

また、現在のバージョン (1.2.x) のネイティブ スクリプトは、ジェスチャの状態をサポートしていません。パン ジェスチャでは、状態を知る必要があります。これが（iosで）できることで、状態を取得できます。ファイル /tns_modules/ui/gestures/gestures.ios.js を編集し、関数 _getPanData を次のように変更します。

function _getPanData(args, view) {
   var recognizer = args.ios;
   var state = "unknown";
   switch(recognizer.state) {
   case UIGestureRecognizerStateBegan:
    state = "began";
    break;
   case UIGestureRecognizerStateChanged:
    state = "changed";
    break;
   case UIGestureRecognizerStateEnded:
    state = "ended";
    break;
   case UIGestureRecognizerStateCancelled:
    state = "cancelled";
    break;
   case UIGestureRecognizerStateFailed:
    state = "failed";
    break;
   }
   return {
       type: args.type,
       view: args.view,
       ios: args.ios,
       android: undefined,
       deltaX: recognizer.translationInView(view).x,
       deltaY: recognizer.translationInView(view).y,
       state: state
   };
}

次に、state フィールドを使用して状態にアクセスできます。

var observer = dragLabel.observe(gestures.GestureTypes.pan, function (panGestureEventData) {
  // ... panGestureEventData.state has on of the above values...
});