Playing cards reordering in hand – Cocos Creator

how reordering playing cards in easy manner my.

Card.ts

import { _decorator, Element, enter, Enter, EventTouch, log, Vec3, view, UITransform, SpriteFrame, Shade, Sprite } from 'cc';
const { ccclass } = _decorator;

@ccclass("Card")
export class Card extends Element {
    holdTimer: any = null;
    spriteComponent: Sprite

    personal originalColor: Shade

    public inDeck = true

    public face: SpriteFrame

    begin() {
        this.node.on(Enter.EventType.TOUCH_MOVE, this.touchMove.bind(this), this);
        this.node.on(Enter.EventType.TOUCH_END, this.touchEnd.bind(this), this);
        this.node.on(Enter.EventType.TOUCH_START, this.touchStart.bind(this), this);
        this.spriteComponent = this.node.getComponent(Sprite)
        this.originalColor = new Shade(this.spriteComponent.colour)
    }

    public toggleFace() {
        if (this.face) {
            this.spriteComponent = this.node.getComponent(Sprite)
            this.spriteComponent.spriteFrame = this.face
        }
    }

    touchStart(occasion: EventTouch) {
        this.node.emit("begin", occasion, this.node)
        this.holdTimer = setTimeout(() => {
        }, 500);
    }

    touchMove(occasion: EventTouch) {
        this.node.emit("drag", occasion, this.node)
    }

    touchEnd(occasion: EventTouch) {
        if (this.holdTimer) {
            clearTimeout(this.holdTimer);
            this.holdTimer = null;
        }
        this.node.emit("finish", occasion, this.node)
    }



}

Hand.ts

import { _decorator, Element, EventTouch, instantiate, log, Node, Prefab, UITransform, Vec3 } from 'cc';
import { Card } from './Card';
const { ccclass, property } = _decorator;

@ccclass('Hand')
export class Hand extends Element {

    @property(Prefab)
    public cardPrefab: Prefab

    @property(Prefab)
    public placeHolderPrefab: Prefab

    public placeHolder: Node

    playing cards: Node[] = []

    draggingCard: Node

    _offset = new Vec3()

    begin() {



    }

    protected onEnable(): void {

    }

    listentOnCardEvent(cardToListen: Node) {
        cardToListen.on("drag", (occasion: EventTouch, card: Node) => {
            if (this.draggingCard) {
                let touchPos = occasion.getUILocation();
                this.draggingCard.setWorldPosition(touchPos.x + this._offset.x, touchPos.y + this._offset.y, this.draggingCard.worldPosition.z);
                for (var i = 0; i  {
            this.draggingCard = card
            let touchPos = occasion.getUILocation();
            this._offset.x = this.draggingCard.worldPosition.x - touchPos.x;
            this._offset.y = this.draggingCard.worldPosition.y - touchPos.y;


            this.placeHolder = instantiate(this.placeHolderPrefab)


        })

        cardToListen.on("finish", (occasion: EventTouch, card: Node) => {
            var idx = this.placeHolder.getSiblingIndex()
            this.placeHolder.destroy()
            this.draggingCard.setParent(this.node)
            this.draggingCard.setSiblingIndex(idx)
            this.draggingCard = null
        })
    }
    addCard(card: Node) {
        this.playing cards.push(card);
        this.node.addChild(card)
        this.listentOnCardEvent(card)
    }

    replace(deltaTime: quantity) {

    }
}