Use drag 'n' drop in nativescript - drag-and-drop

Question

I want to have the drag'n'drop functionality on some labels that are positioned with a absolute layout in a nativescript app. Is it even possible to move them in a new absolute position using drag'n'drop? If yes, can you explain a way to achieve this?
Thank you in advance.

Answer 1

After a little research I found out that you can achieve this with the following steps:
Define an Absolute Layout
Inside it place a label
On the label observer the pan gesture
using the deltaX and deltaY you can change the left and top values of the label using the static method setLeft() and setTop() of absolute layout on the label.
Sample xml:
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
<AbsoluteLayout>
<Label left="10" top="10" text="drag me" id="dragLabel" />
</AbsoluteLayout>
</Page>
Sample js code:
var viewModule = require("ui/core/view");
var gestures = require("ui/gestures");
var absoluteLayout = require("ui/layouts/absolute-layout");
function pageLoaded(args) {
var page = args.object;
var dragLabel = viewModule.getViewById(page, "dragLabel");
var observer = dragLabel.observe(gestures.GestureTypes.pan, function (panGestureEventData) {
var deltaX = panGestureEventData.deltaX;
var deltaY = panGestureEventData.deltaY;
absoluteLayout.AbsoluteLayout.setTop(this, deltaY);
absoluteLayout.AbsoluteLayout.setLeft(this, deltaX);
}, dragLabel);
};
Also, nativescript in the current version (1.2.x) doesn't support the state in the gestures. In the pan gesture, the state is really necessary to know. Here is what you can do (in ios), so you can get the state. Edit the file /tns_modules/ui/gestures/gestures.ios.js and change the function _getPanData with the following:
function _getPanData(args, view) {
var recognizer = args.ios;
var state = "unknown";
switch(recognizer.state) {
case UIGestureRecognizerStateBegan:
state = "began";
break;
case UIGestureRecognizerStateChanged:
state = "changed";
break;
case UIGestureRecognizerStateEnded:
state = "ended";
break;
case UIGestureRecognizerStateCancelled:
state = "cancelled";
break;
case UIGestureRecognizerStateFailed:
state = "failed";
break;
}
return {
type: args.type,
view: args.view,
ios: args.ios,
android: undefined,
deltaX: recognizer.translationInView(view).x,
deltaY: recognizer.translationInView(view).y,
state: state
};
}
Then, you can access the state with the state field:
var observer = dragLabel.observe(gestures.GestureTypes.pan, function (panGestureEventData) {
// ... panGestureEventData.state has on of the above values...
});