拖拽组件

assets/resources.meta

@@ -0,0 +1,14 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "a96f0384-ae30-4d75-a6f6-ce7bad619932",
+  "files": [],
+  "subMetas": {},
+  "userData": {
+    "isBundle": true,
+    "bundleConfigID": "default",
+    "bundleName": "resources",
+    "priority": 8
+  }
+}

assets/resources/scenes.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "090cbe84-71ad-4ca6-bdaf-4b87538405db",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/resources/scenes/drag.scene.meta

@@ -0,0 +1,11 @@
+{
+  "ver": "1.1.49",
+  "importer": "scene",
+  "imported": true,
+  "uuid": "3fd7ab19-8a50-470c-8dc7-0cd664f0fb5b",
+  "files": [
+    ".json"
+  ],
+  "subMetas": {},
+  "userData": {}
+}

assets/resources/ui.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "48a2fcb7-7b67-47f9-b27a-72e5dd8f59bf",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/resources/ui/icons.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "3e88e947-2ba2-4e75-9137-b4478ee3e30c",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/resources/ui/icons/test.png.meta

@@ -0,0 +1,134 @@
+{
+  "ver": "1.0.26",
+  "importer": "image",
+  "imported": true,
+  "uuid": "890f043a-8cad-46e4-b5b1-584554c0cad1",
+  "files": [
+    ".json",
+    ".png"
+  ],
+  "subMetas": {
+    "6c48a": {
+      "importer": "texture",
+      "uuid": "890f043a-8cad-46e4-b5b1-584554c0cad1@6c48a",
+      "displayName": "test",
+      "id": "6c48a",
+      "name": "texture",
+      "userData": {
+        "wrapModeS": "repeat",
+        "wrapModeT": "repeat",
+        "minfilter": "linear",
+        "magfilter": "linear",
+        "mipfilter": "none",
+        "anisotropy": 0,
+        "isUuid": true,
+        "imageUuidOrDatabaseUri": "890f043a-8cad-46e4-b5b1-584554c0cad1",
+        "visible": false
+      },
+      "ver": "1.0.22",
+      "imported": true,
+      "files": [
+        ".json"
+      ],
+      "subMetas": {}
+    },
+    "f9941": {
+      "importer": "sprite-frame",
+      "uuid": "890f043a-8cad-46e4-b5b1-584554c0cad1@f9941",
+      "displayName": "test",
+      "id": "f9941",
+      "name": "spriteFrame",
+      "userData": {
+        "trimType": "auto",
+        "trimThreshold": 1,
+        "rotated": false,
+        "offsetX": 0,
+        "offsetY": 0,
+        "trimX": 0,
+        "trimY": 0,
+        "width": 140,
+        "height": 140,
+        "rawWidth": 140,
+        "rawHeight": 140,
+        "borderTop": 0,
+        "borderBottom": 0,
+        "borderLeft": 0,
+        "borderRight": 0,
+        "packable": true,
+        "pixelsToUnit": 100,
+        "pivotX": 0.5,
+        "pivotY": 0.5,
+        "meshType": 0,
+        "vertices": {
+          "rawPosition": [
+            -70,
+            -70,
+            0,
+            70,
+            -70,
+            0,
+            -70,
+            70,
+            0,
+            70,
+            70,
+            0
+          ],
+          "indexes": [
+            0,
+            1,
+            2,
+            2,
+            1,
+            3
+          ],
+          "uv": [
+            0,
+            140,
+            140,
+            140,
+            0,
+            0,
+            140,
+            0
+          ],
+          "nuv": [
+            0,
+            0,
+            1,
+            0,
+            0,
+            1,
+            1,
+            1
+          ],
+          "minPos": [
+            -70,
+            -70,
+            0
+          ],
+          "maxPos": [
+            70,
+            70,
+            0
+          ]
+        },
+        "isUuid": true,
+        "imageUuidOrDatabaseUri": "890f043a-8cad-46e4-b5b1-584554c0cad1@6c48a",
+        "atlasUuid": ""
+      },
+      "ver": "1.0.12",
+      "imported": true,
+      "files": [
+        ".json"
+      ],
+      "subMetas": {}
+    }
+  },
+  "userData": {
+    "hasAlpha": true,
+    "type": "sprite-frame",
+    "fixAlphaTransparencyArtifacts": true,
+    "redirect": "890f043a-8cad-46e4-b5b1-584554c0cad1@f9941"
+  }
+}

assets/scripts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "bab336a4-c3b5-4e3a-9694-ddae8e852f2b",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/scripts/components.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "409f432f-de47-4163-ab55-71e78cb76ca0",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

assets/scripts/components/GPDrag.ts

@@ -0,0 +1,144 @@
+import { _decorator, CCBoolean, TweenEasing , CCFloat, CCString, Component, easing, Enum, EventTouch, isValid, Node, NodeEventType, Tween, tween, Vec2, Vec3 } from 'cc';
+const { ccclass, property } = _decorator;
+export enum FloatType {
+    None,
+    MoveToTop,
+    MoveToTopLayer,
+    // CopyToTopLayer
+}
+export enum DragBackHomeType {
+    SetPosition,
+    Tween
+}
+export enum EasingString {
+    'linear'    , 'smooth'     , 'fade'         , 'constant'     ,
+    'quadIn'    , 'quadOut'    , 'quadInOut'    , 'quadOutIn'    ,
+    'cubicIn'   , 'cubicOut'   , 'cubicInOut'   , 'cubicOutIn'   ,
+    'quartIn'   , 'quartOut'   , 'quartInOut'   , 'quartOutIn'   ,
+    'quintIn'   , 'quintOut'   , 'quintInOut'   , 'quintOutIn'   ,
+    'sineIn'    , 'sineOut'    , 'sineInOut'    , 'sineOutIn'    ,
+    'expoIn'    , 'expoOut'    , 'expoInOut'    , 'expoOutIn'    ,
+    'circIn'    , 'circOut'    , 'circInOut'    , 'circOutIn'    ,
+    'elasticIn' , 'elasticOut' , 'elasticInOut' , 'elasticOutIn' ,
+    'backIn'    , 'backOut'    , 'backInOut'    , 'backOutIn'    ,
+    'bounceIn'  , 'bounceOut'  , 'bounceInOut'  , 'bounceOutIn'
+}
+@ccclass('GPDrag')
+export class GPDrag extends Component {
+    @property({type:CCBoolean, tooltip:"触碰点偏移量敏感"})
+    public touchOffsetSensitive = true
+
+    @property({type:CCBoolean, tooltip:"失败时回到起始位置"})
+    public backHomeWhenFailed = true
+
+    @property({type:Enum(DragBackHomeType), tooltip:"回家的方式", visible:function(this){
+        return this.backHomeWhenFailed
+    }})
+    public backHomeType:DragBackHomeType = DragBackHomeType.SetPosition
+
+    @property({type:CCFloat, visible:function(this) {
+        return this.backHomeWhenFailed && this.backHomeType == DragBackHomeType.Tween
+    }})
+    public backTweenTime:number = 1;
+
+    @property({type:Enum(EasingString), tooltip:"缓动类型", visible:function(this) {
+        return this.backHomeWhenFailed && this.backHomeType == DragBackHomeType.Tween
+    }})
+    public backTweenEasing:EasingString = EasingString.linear
+
+    @property({type:Enum(FloatType), tooltip:"上浮类型"})
+    public floatType:FloatType = FloatType.None
+
+    @property({type:Node, visible:function(this){
+        return this.floatType == FloatType.MoveToTopLayer 
+        // || this.floatType == FloatType.CopyToTopLayer
+    }})
+    public topLayerNode:Node
+
+    @property({type:CCBoolean, tooltip:"松开后返回原来的层级", visible:function(){
+        return this.floatType != FloatType.None
+    }})
+    public backToOriZ = true;
+    private srcParent:Node
+    private zOrder:number
+    private dragStartPos:Vec2 = new Vec2(0, 0)
+    private dragOffset:Vec2 = new Vec2(0, 0)
+    private succeedCheck:Function = null;
+    private succeedCallback:Function = null;
+    private backTween:Tween<Node>
+
+
+    start() {
+        this.node.on(NodeEventType.TOUCH_START, this.OnDragStart, this)
+        this.node.on(NodeEventType.TOUCH_MOVE, this.OnDragMove, this)
+        this.node.on(NodeEventType.TOUCH_END, this.OnDragEnd, this)
+        this.node.on(NodeEventType.TOUCH_CANCEL, this.OnDragEnd, this)
+    }
+
+    private OnDragStart(e:EventTouch) {
+        this.dragStartPos.set(this.node.position.x, this.node.position.y);
+        let touchPoint = e.getUILocation();
+        Vec2.subtract(this.dragOffset, this.dragStartPos, touchPoint)
+        switch(this.floatType) {
+            case FloatType.MoveToTop:
+                this.zOrder = this.node.getSiblingIndex();
+                this.node.setSiblingIndex(Infinity);
+                break;
+            case FloatType.MoveToTopLayer:
+                this.zOrder = this.node.getSiblingIndex()
+                this.srcParent = this.node.parent
+                this.node.parent = this.topLayerNode;
+                break;
+            // case FloatType.CopyToTopLayer:
+            //     break;
+        }
+    }
+
+    private OnDragMove(e:EventTouch) {
+        let p = e.getUILocation();
+        if (this.touchOffsetSensitive)
+            this.node.setPosition(new Vec3(p.x + this.dragOffset.x, p.y + this.dragOffset.y, 0))
+        else
+            this.node.setPosition(new Vec3(p.x, 0, p.y))
+    }
+
+    private OnDragEnd(e:EventTouch) {
+        if (this.succeedCheck && this.succeedCheck(e)) {
+            this.succeedCallback && this.succeedCallback(e)
+        } else if(this.backHomeWhenFailed){
+            let p = new Vec3(this.dragStartPos.x, this.dragStartPos.y, 0);
+            switch(this.backHomeType) {
+                case DragBackHomeType.SetPosition:
+                    this.node.setPosition(p)
+                    this.OnArrivedHome();
+                    break;
+                case DragBackHomeType.Tween:
+                    this.backTween && this.backTween.stop()
+                    let easing:TweenEasing = EasingString[this.backTweenEasing] as TweenEasing
+                    this.backTween = tween(this.node)
+                        .to(this.backTweenTime, {position:p}, {easing:easing}).call(this.OnArrivedHome.bind(this)).start()
+                    break;
+            }
+        }
+    }
+
+    private OnArrivedHome() {
+        if (this.backToOriZ)
+        switch(this.floatType) {
+            case FloatType.MoveToTop:
+                this.node.setSiblingIndex(this.zOrder)
+                break;
+            case FloatType.MoveToTopLayer:
+                this.node.parent = this.srcParent;
+                this.node.setSiblingIndex(this.zOrder)
+                break;
+        }
+    }
+
+    protected onDestroy(): void {
+        this.node.off(NodeEventType.TOUCH_START, this.OnDragStart, this)
+        this.node.off(NodeEventType.TOUCH_MOVE, this.OnDragMove, this)
+        this.node.off(NodeEventType.TOUCH_END, this.OnDragEnd, this)
+        this.node.off(NodeEventType.TOUCH_CANCEL, this.OnDragEnd, this)
+    }
+}

assets/scripts/components/GPDrag.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "46054293-575d-4bd5-ba45-a7992d44ed7d",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

package.json

@@ -0,0 +1,7 @@
+{
+  "name": "drag",
+  "uuid": "6a0f6edd-acdd-43bd-bdc5-f0fd4b2cf734",
+  "creator": {
+    "version": "3.8.1"
+  }
+}