在NativeScript中拖放 [英] Dragging and Dropping in NativeScript

问题描述

我正在考虑将NativeScript用于新项目，其中用户将某些东西(标签或图像)拖到屏幕的三个区域之一.类似于实体A进入存储桶1、2或3的排序.

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.

我正在考虑以下未充分理解的概念: 一种 1 2 3

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

其中A是对象，其中1、2和3是盒子(或箱)，用户将A拖到其中一个存储桶中.

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.

在我正在使用的Web应用程序中，我使用ngDraggable完成此操作，但是我不确定是否可以在NativeScript中完成.似乎需要AbsoluteLayout来支持拖动部分.但是，下降部分"呢?我希望将GridLayout用于存储分区，以便可以轻松更改其数量.

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.

感谢您的见解和帮助.

推荐答案

您没有义务使用AbsoluteLayout实现拖放. 这是Grid的一个非常基本的示例:

You are not obligated to use AbsoluteLayout to implement drag'n'drop. Here is a very basic example with Grid:

page.ts(TypeScript)

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

从这一点开始，您可以使用状态来检查平移是否以state == 3完成(您的情况:物品被放下)并获取该事件的坐标(因此您将知道物品是否被放到了在相同坐标下的存储桶").

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).

这篇关于在NativeScript中拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！