在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'放置

回答

相關問題