我正在考虑将NativeScript用于新项目,其中用户将某些内容(标签或图像)拖放到屏幕的三个区域之一。有点像实体A在桶1,2或3中的排序。
我正在思考以下糟糕绘制的概念: 一个 1 2 3
其中A是对象,1,2和3是盒子(或箱子),用户将A拖到其中一个桶中。
在我正在处理的Web应用程序中,我使用ngDraggable完成此操作,但我不确定它是否可以在NativeScript中完成。看来AbsoluteLayout需要支持拖动部分。但是,"掉线部分"?我希望使用GridLayout作为存储桶,因此我可以轻松更改它们的数量。
感谢您的任何见解和帮助。
答案 0 :(得分:0)
您没有义务使用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;桶在同一坐标处)。