在 NativeScript 中拖放

Question

I am considering NativeScript for a new project where a user drags something (a label or image) to one of three areas of the screen. Kind of like sorting where entity A goes in bucket 1, 2, or 3.

I am thinking something along the lines of the following poorly drawn concept: 一种 1 2 3

Where A is the object, and 1, 2, and 3 are boxes (or bins) and the user drags the A to one of the buckets.

In the web app I am working on, I accomplish this using ngDraggable, but I was not sure if it could be done in NativeScript. It appears that AbsoluteLayout is required to support the dragging part. But, what about the "dropping part"? I was hoping to use a GridLayout for the buckets, so I can easily change the number of them.

Thanks for any insight and assistance.

Answer 1

您没有义务使用 AbsoluteLayout 来实现拖放。这是一个非常基本的网格示例：

page.ts（打字稿）

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（您的情况：物品掉落）并获取该事件的坐标（这样您就会知道物品是否掉落在相同坐标的 'bucket' 中）。

在 NativeScript 中拖放

Dragging and Dropping in NativeScript

nativescript