在NativeScript中拖放

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

我的想法大致与以下画得不好的概念一致： A. 1 2 3

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

在我正在开发的web应用程序中，我使用ngDraggable实现了这一点，但我不确定是否可以在NativeScript中实现。似乎需要AbsoluteLayout来支持拖动部件。但是，“下降部分”呢？我希望对桶使用网格布局，这样我就可以轻松地更改桶的数量

---

感谢您的帮助。

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

page.ts（打字脚本）

从“数据/可观察”导入{EventData}；
从“ui/Page”导入{Page}；
从“ui/Button”导入{Button}；
从“ui/手势”导入{GestureTypes，PanGestureEventData}；
var项目；
预缴税金：数目；
让我们来看看德尔泰：数字；
已加载导出函数（参数：EventData）{
var page=args.object；
item=page.getViewById（“btn”）；
item.translateX=0；
item.translateY=0；
item.scaleX=1；
item.scaleY=1
}
在PAN上导出函数（args:PanGestureEventData）{
如果（args.state==1）{
税前利润=0；
prevDeltaY=0；
}else if（args.state==2）{
item.translateX+=args.deltaX-prevideltax；
item.translateY+=args.deltaY-prevDeltaY；
prevDeltaX=args.deltaX；
prevDeltaY=args.deltaY；
}
}

page.xml

---

从这一点开始，您可以使用状态来检查pan是否在state==3（您的案例：item dropped）的情况下完成，并获取该事件的坐标（这样您就可以知道该项目是否在相同坐标下被放入“bucket”中）

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

page.ts（打字脚本）

从“数据/可观察”导入{EventData}；
从“ui/Page”导入{Page}；
从“ui/Button”导入{Button}；
从“ui/手势”导入{GestureTypes，PanGestureEventData}；
var项目；
预缴税金：数目；
让我们来看看德尔泰：数字；
已加载导出函数（参数：EventData）{
var page=args.object；
item=page.getViewById（“btn”）；
item.translateX=0；
item.translateY=0；
item.scaleX=1；
item.scaleY=1
}
在PAN上导出函数（args:PanGestureEventData）{
如果（args.state==1）{
税前利润=0；
prevDeltaY=0；
}else if（args.state==2）{
item.translateX+=args.deltaX-prevideltax；
item.translateY+=args.deltaY-prevDeltaY；
prevDeltaX=args.deltaX；
prevDeltaY=args.deltaY；
}
}

page.xml

---

从这一点开始，您可以使用状态来检查pan是否在state==3（您的案例：item dropped）的情况下完成，并获取该事件的坐标（这样您就可以知道该项目是否在相同坐标下被放入“bucket”中）

谢谢你，尼克。我要试一试！谢谢你，尼克。我要试一试！

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