在nativescript中使用拖放'n'放置

我想要在nativescript应用程序中使用绝对布局定位的某些标签上具有拖放功能。使用drag'n'drop可以将它们移动到新的绝对位置吗？如果是的话，你能解释一个办法来达到这个目的吗？在nativescript中使用拖放'n'放置

预先感谢您。

2015-09-01 Charalampos Chrysikopoulos

这里：

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

然后，您可以使用状态栏来访问状态也是一个关于nativescript的非常不错的网站的示例代码：http://www.nativescriptsnacks.com/snippets/2017/04/18/drag-drop.html –

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

定义一个绝对布局
它里面放置标签
在标签观察者的移动手势
使用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有以下几点：

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

来源

2015-09-04 08:10:37

在nativescript中使用拖放'n'放置

回答

相关问题