Question

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

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

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

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

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

Answer 1

您没有义务使用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;桶在同一坐标处）。

在NativeScript中拖放

1 个答案: