Dragging and Dropping in NativeScript

问题

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: A 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.

回答1:

You are not obligated to use AbsoluteLayout to implement drag'n'drop. Here is a very basic example with 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>

From this point, you can use the states to check if the pan is finished with state==3 (your case: item dropped) and get the coordinates of that event (so you will know if the item is dropped in a 'bucket' at the same coordinates).

来源：https://stackoverflow.com/questions/38832339/dragging-and-dropping-in-nativescript

标签

nativescript