在NativeScript中拖放

时间:2016-08-08 14:50:38

标签: nativescript

我正在考虑将NativeScript用于新项目,其中用户将某些内容(标签或图像)拖放到屏幕的三个区域之一。有点像实体A在桶1,2或3中的排序。

我正在思考以下糟糕绘制的概念:           一个 1 2 3

其中A是对象,1,2和3是盒子(或箱子),用户将A拖到其中一个桶中。

在我正在处理的Web应用程序中,我使用ngDraggable完成此操作,但我不确定它是否可以在NativeScript中完成。看来AbsoluteLayout需要支持拖动部分。但是,"掉线部分"?我希望使用GridLayout作为存储桶,因此我可以轻松更改它们的数量。

感谢您的任何见解和帮助。

1 个答案:

答案 0 :(得分:0)

您没有义务使用AbsoluteLayout来实现拖放功能。 这是Grid的一个非常基本的例子:

page.ts(TypeScript)

import { EventData } from "data/observable";
import { Page } from "ui/page";
import { Button } from "ui/button";

import { GestureTypes, PanGestureEventData } from "ui/gestures";

var item;
let prevDeltaX: number;
let prevDeltaY: number;

export function onLoaded(args: EventData) {
    var page = <Page>args.object;
    item = <Button>page.getViewById("btn");

    item.translateX = 0;
    item.translateY = 0;
    item.scaleX = 1;
    item.scaleY = 1
}

export function onPan(args: PanGestureEventData) {

    if (args.state === 1) {
        prevDeltaX = 0;
        prevDeltaY = 0;
    } else if (args.state === 2) {
        item.translateX += args.deltaX - prevDeltaX;
        item.translateY += args.deltaY - prevDeltaY;

        prevDeltaX = args.deltaX;
        prevDeltaY = args.deltaY;
    }
}

<强> page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded">
  <GridLayout width="300" height="400" backgroundColor="red">
      <Button id="btn" text="Drag this Button" pan="onPan" width="100" height="50" />    
  </GridLayout>
</Page>

从这一点开始,您可以使用状态检查平移是否已完成状态== 3(您的情况:项目已删除)并获取该事件的坐标(因此您将知道该项目是否已被删除&#39;桶在同一坐标处)。