complete Android & iOS with same logic

doric-android/doric/src/main/java/pub/doric/shader/DraggableNode.java

@@ -9,6 +9,7 @@ import com.github.pengfeizhou.jscore.JSValue;
 
 import pub.doric.DoricContext;
 import pub.doric.extension.bridge.DoricPlugin;
+import pub.doric.utils.DoricUtils;
 
 @DoricPlugin(name = "Draggable")
 public class DraggableNode extends StackNode {
@@ -52,9 +53,6 @@ public class DraggableNode extends StackNode {
             int x = (int) event.getX();
             int y = (int) event.getY();
 
-            int rawX = (int) event.getRawX();
-            int rawY = (int) event.getRawY();
-
             switch (event.getAction()) {
                 case MotionEvent.ACTION_DOWN:
                     lastX = x;
@@ -63,13 +61,11 @@ public class DraggableNode extends StackNode {
                 case MotionEvent.ACTION_MOVE:
                     int offsetX = x - lastX;
                     int offsetY = y - lastY;
-                    layout(getLeft() + offsetX, getTop() + offsetY, getRight() + offsetX, getBottom() + offsetY);
+                    callJSResponse(onDrag, DoricUtils.px2dp(offsetX), DoricUtils.px2dp(offsetY));
                     break;
                 case MotionEvent.ACTION_UP:
                     break;
             }
-
-            callJSResponse(onDrag, rawX - x, rawY - y);
             return true;
         }
     }

doric-android/doric/src/main/java/pub/doric/utils/DoricUtils.java

@@ -191,11 +191,11 @@ public class DoricUtils {
         return getScreenHeight(null);
     }
 
-    public static float px2dp(int pxValue) {
+    public static float px2dp(float pxValue) {
         return px2dp(null, pxValue);
     }
 
-    public static float px2dp(Context context, int pxValue) {
+    public static float px2dp(Context context, float pxValue) {
         if (context == null) {
             context = Doric.application();
         }

doric-demo/src/DraggableDemo.ts

@@ -1,24 +1,38 @@
-import { Panel, Group, vlayout, layoutConfig, draggable, Color, Text} from "doric";
+import { Panel, Group, vlayout, layoutConfig, draggable, Color, Text, Draggable, modal, Gravity, loge} from "doric";
 import { title } from "./utils";
 @Entry
 class DraggableDemo extends Panel {
     build(root: Group) {
         let text = (new Text).also(it => {
-            it.layoutConfig = layoutConfig().most()
+            it.layoutConfig = layoutConfig().just().configAlignmnet(Gravity.Center)
+            it.width = 100
+            it.height = 30
             it.textColor = Color.parse('#ff0000')
+            it.onClick = () => {
+                modal(context).toast('Clicked')
+            }
+        })
+        let drag: Draggable
+        let lastX: number = 0
+        let lastY: number = 0
+        drag = draggable({
+            onDrag: (x: number, y: number) => {
+                lastX += x
+                lastY += y
+                drag.translationX = lastX
+                drag.translationY = lastY
+                loge(lastX)
+                text.text = "x: " + lastX.toFixed(0) + " y: " + lastY.toFixed(0)
+            }
+        }, [ text ]).apply({
+            layoutConfig: layoutConfig().just(),
+            width: 100,
+            height: 100,
+            backgroundColor: Color.WHITE
         })
         vlayout([
             title("Draggable Demo"),
-            draggable({
+            drag
-                onDrag: (x: number, y: number) => {
-                    text.text = "x: " + x + " y: " + y
-                }
-            }, [ text ]).apply({
-                layoutConfig: layoutConfig().just(),
-                width: 100,
-                height: 100,
-                backgroundColor: Color.WHITE
-            })
         ])
             .apply({
                 layoutConfig: layoutConfig().most(),

doric-iOS/Pod/Classes/DoricRegistry.m

@@ -44,6 +44,7 @@
 #import "DoricAnimatePlugin.h"
 #import "DoricNestedSliderNode.h"
 #import "DoricInputNode.h"
+#import "DoricDraggableNode.h"
 #import "DoricLibrary.h"
 
 
@@ -124,6 +125,7 @@ - (void)innerRegister {
     [self registerViewNode:DoricFlowLayoutNode.class withName:@"FlowLayout"];
     [self registerViewNode:DoricNestedSliderNode.class withName:@"NestedSlider"];
     [self registerViewNode:DoricInputNode.class withName:@"Input"];
+    [self registerViewNode:DoricDraggableNode.class withName:@"Draggable"];
 }
 
 - (void)registerJSBundle:(NSString *)bundle withName:(NSString *)name {

doric-iOS/Pod/Classes/Shader/DoricDraggableNode.h

@@ -0,0 +1,33 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//
+//  DoricTextNode.h
+//  Doric
+//
+//  Created by jingpeng.wang on 2020/01/03.
+//
+
+#import "DoricStackNode.h"
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface DoricDraggableNode : DoricStackNode
+
+@property(nonatomic, strong) NSString *onDragFunction;
+
+@end
+
+NS_ASSUME_NONNULL_END

doric-iOS/Pod/Classes/Shader/DoricDraggableNode.m

@@ -0,0 +1,45 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//
+//  DoricTextNode.m
+//  Doric
+//
+//  Created by jingpeng.wang on 2020/01/03.
+//
+
+#import "DoricDraggableNode.h"
+
+@implementation DoricDraggableNode
+- (DoricStackView *)build {
+    DoricStackView *stackView = [DoricStackView new];
+    UIPanGestureRecognizer *gesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(onDrag:)];
+    [stackView addGestureRecognizer:gesture];
+    return stackView;
+}
+
+- (void)onDrag:(UIPanGestureRecognizer *)gesture {
+    CGPoint point = [gesture translationInView:self.view];
+    [gesture setTranslation:CGPointZero inView:self.view];
+    [self callJSResponse:_onDragFunction, @(point.x), @(point.y), nil];
+}
+
+- (void)blendView:(DoricStackView *)view forPropName:(NSString *)name propValue:(id)prop {
+    if ([name isEqualToString:@"onDrag"]) {
+        _onDragFunction = prop;
+    }
+    [super blendView:view forPropName:name propValue:prop];
+}
+@end