ממשק גרירה תומר עברית (rtl)

josh

מחפש ממשק גרירה (שניתן לגרור אלמנט מאזור אחד לשני כולל אפשרות מיון מובנית) מבוסס אנגולר.
מצאתי את זה
https://material.angular.io/cdk/drag-drop/overview
שהוא ממש יפה, אבל לצערי כאשר

<html lang="en" dir="rtl">

הוא מתחרבש עם האנימציה של הגרירה.
ניסיתי כמה טלאים של CSS וכדומה אבל ללא הצלחה.
שאלותי הם:
א. האם יש למישהו ניסיון עם הממשק הספציפי הזה?
ב. האם יש אולי ממשק אחר שתומך ב-rtl?
נ.ב. בדקתי גם את זה
https://primeng.org/dragdrop
אבל הוא לא עונה על הדרישות של מיון .
השאלות הם

יוסף בן שמעון

פעם כתבתי קומפוננטה כזו, אני שם את הקוד כאן בלי אחריות

    onDragStart(event: any, data: any) {
        event.dataTransfer.setData('id', data.id);
    }
    onDragLeave(event: any) {
        event.path[0].id = ""
    }
    onDragEnter(event: any) {
        event.path[0].id = "on-drag"
    }
    allowDrop(event: any) {
        event.preventDefault();
    }
    onDrop(event: any, target: any) {
        event.path[0].id = ""
        let movedId = event.dataTransfer.getData('id');
        event.preventDefault();
        let oldIndex = this.plstService.activeList?.items?.findIndex(item => item.id == movedId);
        let newIndex = this.plstService.activeList?.items?.findIndex(item => item.id == target.id);
        // console.log("newIndex", newIndex, "oldIndex", oldIndex)
        if (oldIndex! > newIndex!) ++newIndex!;
        console.log("newIndex", newIndex, "oldIndex", oldIndex)
        if (oldIndex == newIndex) return;
        this.arrayMove(this.plstService.activeList?.items, oldIndex, newIndex)
        this.plstService.storeLists()
    }
    arrayMove(arr: any, oldIndex: any, newIndex: any) {
        arr.splice(newIndex, 0, arr.splice(oldIndex, 1)[0]);
    };


.drag{
    cursor: move;
    /* height: 20px;
    background: #5f5f5f;
    width: 97%; */
}
.drop{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
    height: 78%;
    width: 10px;
}
.drop#on-drag{
    background-color: #ffffff;
    box-shadow: 0 0 10px 3px #fff;
}

        <div class="item-container">
            <div class="item" *ngFor="let item of plstService.activeList.items">
                <div class="drag" draggable="true" (dragstart)="onDragStart($event, item)">
                    <i class="fas fa-arrows-alt"></i>
                </div>
                <a>{{item.title}}</a>
                <div class="drop" (drop)="onDrop($event, item)" (dragover)="allowDrop($event)" (dragenter)="onDragEnter($event)" (dragleave)="onDragLeave($event)">
                </div>

            </div>
        </div>

josh

לאחר בדיקות שונות התברר לי שהייתי פשוט צריך לעדכן את האנגולר (ובכללו את ה-cdk) לגרסה 18,
ואז זה
https://material.angular.io/cdk/drag-drop/overview
עובד out of the box.

תחומים - פורום חרדי מקצועי

ממשק גרירה תומר עברית (rtl)