在Nativescript中使用拖放功能

Question

我希望在一个nativescript应用程序中，为一些使用绝对布局定位的标签添加拖放功能。是否可以使用拖放将它们移动到新的绝对位置？如果是，请你解释一下如何实现。

谢谢您提前！

- Charalampos Chrysikopoulos

---

这里还有一些关于Nativescript的非常好的网站的示例代码：http://www.nativescriptsnacks.com/snippets/2017/04/18/drag-drop.html - Charalampos Chrysikopoulos

Answer 1

经过一些研究，我发现您可以通过以下步骤实现：

• 定义绝对布局
• 在其中放置一个标签
• 在标签上观察平移手势
• 使用 deltaX 和 deltaY 可以使用标签的绝对布局上的 setLeft() 和 setTop() 静态方法更改标签的左侧和顶部值。

示例 XML:

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
  <AbsoluteLayout>
    <Label left="10" top="10"  text="drag me" id="dragLabel" />
  </AbsoluteLayout>
</Page>

样例js代码：

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);
};

此外，目前版本的NativeScript（1.2.x）不支持手势中的状态。在滑动手势中，了解状态非常必要。以下是您可以在iOS上执行的操作，以获取状态。编辑文件/tns_modules/ui/gestures/gestures.ios.js，并将函数_getPanData更改为以下内容：

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

然后，您可以使用state字段访问状态：

var observer = dragLabel.observe(gestures.GestureTypes.pan, function (panGestureEventData) {
  // ... panGestureEventData.state has on of the above values...
});

- Charalampos Chrysikopoulos